1

我们试图通过隐藏实际的复选框输入元素并使用input:checked+labelCSS 选择器更改标签的样式来创建一个带有自定义复选框的页面。这很好用，但在 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。我们错过了什么吗？我们如何隐藏复选框元素，以便它仍然可以工作并且不占用布局中的空间？

4

6 回答 6

1

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

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

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

于 2012-08-14T13:57:35.410 回答
0

尝试input使用这组样式设置您的样式：

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

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

于 2012-08-14T12:09:45.997 回答
0

我没有IE7，所以无法测试

但我会放在display:none那里

input { display:none }
于 2012-08-14T12:23:47.737 回答
0

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

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

你也可以隐藏它visibility: hidden;

于 2012-08-14T12:35:16.963 回答
0

通过删除规则label { display: block; }，这似乎有效；JSF中。

于 2012-08-14T12:51:03.873 回答
0

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

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

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

于 2012-08-14T13:36:31.137 回答