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 and 7) 中，情况并非如此。有没有办法让 ul 在 ie 中包含 lis，就像在其他浏览器中一样？

Answer 1

只需添加 doctype declaration 即可让 IE 在标准模式下呈现您的文档。到您的 HTML。

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