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

……（省略 8 个或更多）

这样的代码出现的几率是比较小吧，一般情况下，不会有这么多隐藏域，而且表单标签可能会有其他如 p、li 等标签包裹，这样的话，此 bug 又不会出现。我们抛开这些情况，以此 bug 会出现来讨论。上面代码运行后在 IE6 或 IE7 和 FF 中的效果如下图：

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

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

把所有隐藏域写在同一行里

优点：不要借助其他标签，不要写样式

缺点：代码可读性下降

隐藏域浮动

优点：代码可读性好

缺点：需要借助 class，如果使用属性选择器的话，IE6 不支持

隐藏域绝对定位

优点：代码可读性好

缺点：需要借助 class，如果使用属性选择器的话，IE6 不支持

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

上面的几种方法虽然可以解决这个问题，但个人认为都不是很完美，如果你有更好的办法，欢迎留言。

Original article: 隐藏域在ie中占空间的bug

©2015 一起CSS. All Rights Reserved.