Проблема с шагом сетки только в 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;
}