html - 如何解决这个简单的 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 包含 ie 中的 lis，就像在其他浏览器中一样？

Answer 1

只需添加 doctype declaration 即可让 IE 以标准模式渲染您的文档。到您的 HTML。

原因是只有在 IE 的怪异模式下我才能想象您的 ul 不包含您的 li。在标准模式下，它应该以与其他浏览器相同的方式呈现，如 this jsFiddle demo 所证明的那样。 (在 IE 中查看)这确保了其预览 Pane 中的标准模式。