最後一行列表項在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>