html - IE7 : position:absolute doesn't take element out of document flow

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 从文档流中取出的 block 元素在 IE7 上仍然占用垂直空间。

这是它在较新的浏览器上的样子:

First         Hello
Second        Hello
Third         Hello

在 IE7 上它看起来像这样:

              Hello
First
              Hello
Second
              Hello
Third

更接近我们实际场景的示例，参见this fiddle .我们错过了什么吗？我们如何隐藏复选框元素，使其仍然有效并且不占用布局空间？

Answer 1

您可以使用此 css 设置输入样式以隐藏 ie 中的输入。 (如@Abody97 所说)

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

但是为了删除由输入创建的空间。删除输入标签之间的空格。喜欢<input /><input />不是<input /> <input />