在IE7中使用塊元素的自動邊距

我一直在試圖創建LI元素，並在其中留下浮動塊和圖像（作爲「塊」）。代碼在所有瀏覽器中都能正常工作，除了IE 7（和6），其中LI是垂直組織而非水平組織的。爲了使代碼在IE7中正常工作，我應該更改哪些內容？（你也可以在http://jsbin.com/ilexa/edit找到代碼）。在IE7中使用塊元素的自動邊距

CODE：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css"> 

<style> 
ul { 
    width:700px; 
} 
li { 
    float:left; 
    margin:10px; 
} 
li img { 
    display:block; 
    margin: 0 auto ; 
    width:50px; 
    height:50px; 
} 
</style> 
</head> 
<body> 
<ul> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
    <li><img src="http://dummyimage.com/50x50/000/fff" /></li> 
</ul> 
</body> 
</html>

來源

2010-12-05 Gidi

是否有必要擁有<img>爲塊？間距不能完全由<li>處理？另一種方法可能是宣佈<img>爲float: left - 或者甚至可以是inline-block（請參閱Block-level elements within display: inline-block）。

來源

2010-12-05 09:59:31

@Matrin - 我需要作爲一個塊，因爲我後來在LI中插入更多的東西（我沒有在源代碼中加入它來簡化它）。爲什麼「block」屬性會導致這個問題呢？（Gidi） – Joel 2010-12-05 10:50:18

在IE7中使用塊元素的自動邊距

回答

相關問題