<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" />后，页面正常，卡死问题也解决了