最后一行列表项在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>