Не сразу понял, что происходит когда столкнулся с багом - в 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)

Реклама для "поддержания штанов":

Метки: css, ie, верстка

Опубликовано Понедельник, Февраль 25, 2008 в 21:42 в следующих категориях: Без рубрики. Вы можете подписаться на комментарии к этому сообщению через RSS 2.0. Вы можете добавить комментарий, или trackback со своего сайта.