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

Question

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

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

在 Chrome/FF/IE7 中运行良好，但在 IE8 和 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;
}