Question

这里已经有很多IE7浮动问题。

我已经阅读了其中一些内容，但仍无法解决我的问题。

如果您在IE8，Firefox和Chrome中查看此页面。

http://pastehtml.com/view/1devx12.html

它们都正确显示。

但是如果你在IE7中查看它，它看起来像这样，

http://img713.imageshack.us/i/ietesterie7.jpg/

所有标签都显示在第一行，这显然不是预期的。

如果可能的话，我想避免添加额外的HTML标记。

应该添加什么css来解决问题？

非常感谢大家。

Answer 1

尝试使用不同的复选框样式。将标签缠绕在输入端 - 这将使它们保持在一起。此外，不要将它们放在DIV中，而是尝试在无序列表中设置样式。

在这里查看实时演示（尚未在IE中测试过 - 没有在Mac上安装它 - 但应该可以工作）：http://jsfiddle.net/wG7B2/

<强> HTML：

<ul>
    <li>
    <label for="checkbox1"><input id="checkbox1" type="checkbox" value="">Option1</label>
    </li>
    <li><label for="checkbox2"><input id="checkbox2" type="checkbox" value="">Option2</label>
    </li>
    <li><label for="checkbox3"><input id="checkbox3" type="checkbox" value="">Option3</label>
    </li>
</ul>

<强> CSS

ul{
    list-style:none;
    padding:0;
    margin:0;
}

ul li{
    padding-bottom:10px;
}

ul li:last-child{
    padding-bottom:0px;
}

ul li input{
    margin-right:5px;
}

修复IE7奇怪的浮动行为

1 个答案: