仅限IE8 / 9中的网格间距问题

Question

我遇到了一个奇怪的情况，第一个<dl>元素的宽度是其他元素的两倍，但仅限于IE。这会导致间隙出现在此照片网格布局中。

示例：http://user45201.vs.easily.co.uk/?page_id=109

在Chrome / FF / IE7中运行良好但在IE8和IE中有奇怪的间距IE9。

Answer 1

看起来麻烦的一部分是非浮动父级中的浮动元素。我添加了一个浮动到父容器并修复它。由于您使用宽度为33％并尝试在元素上应用间距，因此我添加了box-sizing属性，因此图像不会跳转到下一行。希望这会有所帮助。

#gallery-1 {
    float:left;
}
#gallery-1 .gallery-item {
    float: left;
    text-align:center;
    width: 33%;
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#gallery-1 .gallery-icon{
    padding-left:10px;
    padding-top:10px;
}