我一直在尝试创建左浮动的 LI 元素和其中的图像(作为“ block ”)。 除了 IE 7(和 6)之外，代码在所有浏览器中都可以正常工作，在这些浏览器中，LI 是垂直组织的，而不是水平组织的。 为了使代码在 IE7 中正常工作，我应该更改什么？ (您也可以在 http://jsbin.com/ilexa/edit 找到代码)。
代码:
<!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>
最佳答案
是否需要 <img>作为 block ？ <li> 不能完全处理间距吗？ ？另一种方法是也声明 <img>作为float: left - 甚至可能是 inline-block (参见 Block-level elements within display: inline-block)。
关于css - IE7 中 block 元素的自动边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4357821/