Удвоение отступа (margin) в Internet Explorer 6

Не сразу понял, что происходит когда столкнулся с багом - в Internet explorer 6 отступ визуально казался больше, чем в Mozilla, Opera IE7. При увеличении отступа эта разница становилось более заметной. Хотя, никаких предпосылок к этому, казалось бы, быть не должно - В css всё ровно… Баг наблюдался при указании отступа для “плавающего” элемента (margin-left:10px; float:left) причем, только если отступ и выравнивание в одну сторону.

Как оказалось, это довольно известная проблема с удвоением отступа margin характерна для IE версии 6 и ниже и именно при выравнивании элемента в сторону отступа.. И название у неё имеется  - Doubled Float-Margin Bug.

Конечно, можно отказаться от использования margin для плавающего элемента, но есть другой более действенный способ - прописать display:inline для этого же элемента. Кроме того, можно воспользоваться условными комментариями для Internet Explorer версии 6 и ниже (lt 6) или хаками.

Дополнительную информацию можно посмотреть тут: http://www.positioniseverything.net/explorer/doubled-margin.html

upd Бонус расползание фона (background) в IE  при ненулевом отступе (margin) как раз на расстояние отступа (margin-bottom:10px; background:url() repeat-y;) вылечилось добавлением width:100% для блокового элемента (ie margin background)

Метки: , ,

Автор будет признателен, если Вы поделитесь ссылкой на статью, которая Вам помогла:
BB-код (для вставки на форум)

html-код (для вставки в ЖЖ, WP, blogger и на страницы сайта)

ссылка (для отправки по почте)

Добавить комментарий