Двойной отступ в IE6

Каждый верстальщик сталкивался с проблемой двойного отступа у элементов со свойством float:left;, во всеми любимом браузере Internet Explorer 6.

Пример

Создадим слой div фиксированного размера, зададим ему стиль со свойством float:left, и проверим как будет отображаться информация в браузерах IE6 и FF.

#layer {background:#FAFAFA; width:500px; border:solid 1px #DDD; padding:10px 20px; float:left; margin-left:100px; } p {margin:0; padding:5px 0 10px 0;}
<div id="layer"> <p>Люди конечного том бы. Его статьи причин продукт ну, по если стимул его, чем бы любых обычно собственный. Ну не назад поскольку. Буду важное поскольку их нет, то вещь ошибки разработчик миф. Тест пока всего его вы, об пять лагерю человек все.</p> <p>Мнение обеспечения тем от, за всю русском редактор. Он учимся плохой результаты три. Многие проектами разработчик об шеф, чем ну лучше низкокачественный. Так йорке ваших каждый за, но они каким страниц времени, нее но черт чтобы.</p> <p>Руки появления об как, эти коду огонь успехов ты. Сажусь прекрасно разработки мог об. Не программы вероломно шеф, состояние принадлежите удовольствием опа то. Так периоды программистам ну, плиты шагов мог мы, мысли участки начальники оно за.</p></div>

Результат

В результате отступ в FF будет 100px, а в IE6 — 200px.

Двойной отступ в IE6

Решение

Решение очень простое. Достаточно добавить свойство display:inline элементу.

CSS-стиль будет выглядеть так:

#layer {background:#FAFAFA; width:500px; border:solid 1px #DDD; padding:10px 20px; float:left; margin-left:100px; display:inline; /* Добавление этого свойства решает проблему двойного отступа в IE6*/ } p {margin:0; padding:5px 0 10px 0;}

Результат

В результате отступы в браузерах будут одинаковыми.

Решение бага двойного отступа в ИЕ6

Категории

Веб-дизайнHTMLВерстка

Комментарии