IE7中带有块元素的自动边距答案

【问题标题】：Auto margin with block element in IE7IE7中带有块元素的自动边距
【发布时间】：2010-12-05 19:22:59
【问题描述】：

我一直在尝试创建带有左浮动的 LI 元素和其中的图像（作为“块”）。该代码在所有浏览器中都可以正常工作，除了 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>

【问题讨论】：

标签： css internet-explorer-7

【解决方案1】：

是否有必要将<img> 作为块？ <li>不能完全处理间距吗？另一种方法是将<img> 也声明为float: left - 甚至可能是inline-block（参见Block-level elements within display: inline-block）。

【讨论】：

@Matrin - 我需要作为一个块，因为我稍后会在 LI 中插入更多的东西（我没有将它包含在源代码中以使其简单）。为什么“block”属性会导致这个问题？（吉迪）
我怀疑 IE 遵循“标准”块布局，即每行允许一个块，尽管它被包裹在浮点数中。尝试在图像本身上设置float 并将其保持阻止 - 这有帮助吗？