修复 IE7 奇怪的浮动行为

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;
}