В последних элементах списка строк отсутствует нижнее поле в 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; объясняется здесь. Достаточно сказать, что он работает в IE7.

Мне также пришлось свернуть пробел в вашем HTML (почему? Читайте 1 и 2 ):

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