如何解決這個簡單的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 declaration，即可在標準模式下呈現您的文檔。

原因是隻有在IE的怪癖模式，我可以想象你的ul不包含你的li s。在標準模式下，應該呈現方式與其他瀏覽器一樣，如this jsFiddle demo（在IE中查看）所證明的那樣，它確保其預覽窗格中的標準模式。