Question

我们尝试通过隐藏实际的复选框输入元素并使用input:checked+label CSS选择器更改标签的样式来创建包含自定义复选框的页面。这工作正常，但在IE7上，隐藏的复选框仍占用文档流的空间，弄乱了布局。

这是一个非常简化的问题演示：

<style type="text/css">
div.hello { position: absolute; left: 200px; }
</style>

<ul>
    <li><div class="hello">Hello</div><div>First</div></li>
    <li><div class="hello">Hello</div><div>Second</div></li>
    <li><div class="hello">Hello</div><div>Third</div></li>
</ul>

似乎从position:absolute的文档流中取出的任何块元素仍占用IE7上的垂直空间。

以下是新浏览器的外观：

First         Hello
Second        Hello
Third         Hello

在IE7上它看起来像这样：

              Hello
First
              Hello
Second
              Hello
Third

有关离实际情况更近的示例，请参阅this fiddle。我们错过了什么吗？我们如何隐藏checkbox元素以使其仍然有效并且在布局中不占用空间？

Answer 1

您可以使用此css设置输入样式以隐藏输入ie。（正如@ Abody97所说）

input { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    opacity: 0; 
    width: 0px; 
    height: 0px; 
}

但是为了删除由输入创建的空格。删除输入标记之间的空格。与<input /><input />而非<input /> <input />

一样

Answer 2

尝试使用以下样式设置样式input：

input {
    position: absolute;
    top: -9999px;
    left: -9999px;
    opacity: 0;
    width: 0px;
    height: 0px;
}

这似乎也适用于IE。我希望有所帮助！

Answer 3

我没有IE7，所以无法测试

但我会把display:none放在那里

input { display:none }

Answer 4

:checked是一个CSS3选择器，在IE7中不起作用。

~~为什么不用display:none隐藏复选框而不是用绝对定位移动它？~~

您也可以使用visibility: hidden;

隐藏它

Answer 5

只需删除规则label { display: block; }，这似乎有效; JSFiddle

Answer 6

我添加了以下CSS规则来修复它：

label
{
    display: block;
    *zoom: 1;
}

这样可以在IE7中启用 hasLayout 行为，并使其正确呈现内容。在规则之前*确保这仅适用于IE7。如果您需要有效的CSS 2.1解决方案，请回复，我会尝试以其他方式修复它。

IE7：position：绝对不会从文档流中取出元素

6 个答案: