如何解决这个简单的IE渲染问题？

Question

考虑以下代码:

<style type="text/css">

ul { clear: both; overflow: hidden; border: 3px solid red; margin-bottom: 10px; }
ul li { display: block; padding: 30px 80px; border: 1px solid green; float: left; }

</style>

<ul>

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>

<ul>

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

</ul>

在firefox和chrome(也可能是safari和opera也没有测试过)看起来很好.意思<li>'s是在<ul>'s绿色边界内.

但是在ie(9,8和7)中,情况并非如此.有没有办法让ul包含lis,就像在其他浏览器中一样？

Answer 1

只需让IE在标准模式下通过向HTML 添加doctype声明来呈现文档.

原因是只有在IE的怪癖模式中才能想象你ul不包含你的lis.在标准模式下,它应该以与其他浏览器相同的方式呈现,正如这个jsFiddle演示(在IE中查看)所证明的那样,它确保了预览窗格中的标准模式.