最后一行列表项目缺少IE7的下边距

Question

我想知道为什么列表项作为最后一行在IE7上缺少底部边距？

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

Answer 1

还有（讨厌的）方法来修复它仍然使用浮动，但在这种情况下最简单的解决方案是切换到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>