css - 最后一行列表项在 IE7 上缺少底部边距

Question

我想知道为什么在 IE7 上作为最后一行列出的元素缺少底部边距？

http://jsfiddle.net/JeaffreyGilbert/sW5DB/

Answer 1

仍然有(恼人的)方法可以使用 float 来修复它，但在这种情况下最简单的解决方案是切换到 display: inline-block。

参见: http://jsfiddle.net/3rjdf/

用三个新属性替换 float:left:

ul { width:300px; margin:0; padding:0; overflow:hidden; list-style:none; background:#ccc; }
li { display:inline-block; *display:inline; zoom:1; /* float:left; */ width:98px; height:120px; margin-bottom:30px; border:1px solid black; background:#f0f0f0; }

*display:inline; zoom:1; is explained here.可以说它使它可以在 IE7 中运行。

我还必须折叠您的 HTML 中的空格(为什么？请阅读 1 和 2):

<ul>
    <li></li><li></li><li></li><li></li><li></li>
</ul>