input type=hidden /在IE中占空间(转)

input 的 type 设为 hidden 的话，就是隐藏域（废话）。隐藏域在页面中不显示，但可以有值。既然是“隐藏”的，怎么还说会占空间呢。这是 IE 的 bug，不过这个 bug 的出现需要一定的条件，换句话说就是出现的几率比较低，所以可能很多人没有遇到过。那什么样的情况下会出现呢？看下面的代码：

<input /><input class="hide" type="hidden" /><input class="hide" type="hidden" />……（省略 8 个或更多）<input type="submit" value="send" />

这样的代码出现的几率是比较小吧，一般情况下，不会有这么多隐藏域，而且表单标签可能会有其他如 p、li 等标签包裹，这样的话，此 bug 又不会出现。

我们抛开这些情况，以此 bug 会出现来讨论。上面代码运行后在 IE6 或 IE7 和 FF 中的效果如下图：

在 IE6 或 IE7 中，输入框和提交按钮有很大的间隔，而在 FF 中则效果正常。如果隐藏域越多的话，IE6 或 IE7 中间隔就越大，而 FF 中则始终没有问题。你可以查看Demo

解决此 bug 有以下几个办法：

把所有隐藏域写在同一行里: 优点：不要借助其他标签，不要写样式; 缺点：代码可读性下降
隐藏域浮动: 优点：代码可读性好; 缺点：需要借助 class，如果使用属性选择器的话，IE6 不支持
隐藏域绝对定位: 优点：代码可读性好; 缺点：需要借助 class，如果使用属性选择器的话，IE6 不支持

其实并不只是隐藏域会占空间，把 type 换成其他类型，同样会有这样的问题。比如把 type 换成 button，然后 display:none，效果是一样的。

-------------------------------------------------------------------------------------------------------------------------------------

今天在IE8杂项模式下碰到这个问题，最开始是访问页面卡死，不能动，只能强制关闭IE

在调试过程发现样式错位问题，一直找不到原因，后来才发现删除form表单下的一列<input type="hidden" />后，页面正常，卡死问题也解决了

转载于:https://www.cnblogs.com/miharu/p/4131759.html

input type=hidden /在IE中占空间(转)相关推荐

html 中表单元素input type=hidden的作用
转自:https://blog.csdn.net/xiaobing_122613/article/details/54946559 (隐藏只是在网页页面上面不显示输入框,但是虽然隐藏了,还是具有for ...
POST请求转换为其他请求失效 input type=“hidden“ name=“_method“ value=“put“无效
在使用Springboot进行RESTFUL风格开发时需要将表单数据以其他请求提交. 直接在表单中添加 <input type="hidden" name="_me ...
HTML元素 - input type=hidden
定义传输关于客户/服务器交互的状态信息. Transmits state information about client/server interaction. 注释这种输入类型用户无法控制,但 ...
html+input+hidden,input type=hidden
input type="hidden" 的"hidden"设web开发者包括能够当表单提交不会被用户看到或修改的数据.例如,当前正在订购或编辑的内容的ID,或唯 ...
表单元素input type=”hidden”的作用
隐藏域在页面中对于用户是不可见的,在表单插入中隐藏域的目的在于收集和发送信息,以利于被处理表单的程序所使用注:隐藏只是在网页页面上不显示输入框,但是虽然隐藏了,还是具有form传值功能.一般用来传值 ...
html（隐藏域）＜input type=“hidden“ id=““/＞用法
解决一个前端页面查询的方法: 问题介绍: (1)中描述不添加查询条件,那就查询所有,之后点击查询. (2)查询结果数据库中一共有10条记录,每页分两条共五页. (1)这个在名称出输入 2. (2)但是 ...
Javascript button onclick和input type button在form中失效解决方案
<form><input type="button" onclick="reset()"><button type="b ...
JSP中 input type 用法
JSP中 input type 用法 Input表示Form表单中的一种输入对象,其又随Type类型的不同而分文本输入框,密码输入框,单选/复选框,提交/重置按钮等,下面一一介绍. 1,type=te ...
解决input[type=number]无法显示非数字字符的问题
在移动端webview实现的页面中,有数字的地方必须使用input type="number"类型的input,否则触发后的键盘为全键盘,而非数字键盘.但另外的一个问题是,inpu ...

input type=hidden /在IE中占空间(转)

input type=hidden /在IE中占空间(转)相关推荐

最新文章

热门文章