CSS box model? @ DeForum.ru

Я тут обнаружил странную вещь во время дебаггинга: я сделал простую тестовую страницу, в которой три <div>’a находятся внутри контейнера:

Код:

<div id="container">
 <div id="menu">blah-blah</div>
 <div id="main">blah-blah</div>
 <div id="aux">blah-blah</div>
</div>

Стили я делал изходя из того, что мне нужно было одинаковое расстояние в 10 пикселей как между этими слоями, так между ними и краями контейнера (я опустил неважные в данном случае стили, такие как цвета или внутренний отступ), прописав отступ в пять пикселей для контейнера и такие же поля для слоёв:

Код:

<style type="text/css">
<!--
#container { padding: 5px; }
#menu { margin: 5px; }
#main { margin: 5px; }
#aux { margin: 5px; }
-->
</style>

В итоге получается такая бяка:

IE 6 даёт справа, слева и снизу контейнера правильные расстояния в 10 пикселей, а сверху остаётся только 5 пикселей. То же самое происходит между внутренними слоями — только 5 пикселей (см. ссылку). Лечится это при проставлении margin-top: 10px для каждого внутреннего слоя.
Однако это не работает для Firefox/Opera 7, поскольку они изначально показывают внешний отступ правильно, хотя также как и Осёл показывают только 5 пикселей между внутренними слоями (см. ссылку). Поэтому, при вышеупомянутом «хаке» расстояние между верхним краем контейнера и первым внутренним слоем получается равным 15-и пикселям.

В общем, почему разные браузеры показывают такую простую конструкцию по-разному неправильно? Или, быть может, я чего не знаю или недопонимаю?

theUg, действительно, боксовая модель у IE 6 несколько глючная и по этому отличается от боксовой модели других.

Я обычно лечу эту проблему border-ом с цветом бэкгроунда. Либо использую исключительно padding.

Вариант 1:

Код:

<style type="text/css"> 
<!-- 
#container { padding: 5px; } 
#menu { border: 5px solid #FFF; } 
#main { border: 5px solid #FFF; } 
#aux { border: 5px solid #FFF; } 
--> 
</style>

Вариант 2:

Код:

<style type="text/css"> 
<!-- 
#container { padding: 10px; } 
#menu {  } 
#main {  } 
#aux {  } 
--> 
</style>

6 Сообщения: 1834 Зарегистрирован: 28.12.04

theUg, у ИЕ исторически бредовые отношения с этим делом, причём у 5 свои, у 5.5 другие, а у 6 третьи. На http://webmascon.com было довольно много на эту тему, поищите.

Firefox/Opera отображают правильно.
По стандарту между соседними блоками отображается максимальный из марджинов, а не сумма.
Так что, по идее, достаточно убрать паддинг у контейнера и выставить остальным марджин в 10рх.
Но как помирить со стандартом IE...

2 IonDen666. Проблема с подобными решениями (вариант 1), что они убивают всю идею. Вместо писания по стандартам, начинается мудение в стиле «как бы сделать так, чтобы в IE 4 более-менее прямо стояло и при этом в 4-м шкафу не разваливалось?».

Что касается padding’а, то я с него и начинал.

2 <sergio.ga>.

Цитата:

По стандарту между соседними блоками отображается максимальный из марджинов, а не сумма.

Да, я тоже так подумал и установил опытным путём, но хотел убедиться, что это стандарт такой, а не кривая интерпретация.

Цитата:

…достаточно убрать паддинг у контейнера и выставить остальным марджин в 10рх

Удивительно, но это сработало. И даже в шестом осле. Всё генитальное просто, не правда ли? :glasses:

* * *

Всем спасибо, приятно знать, что правильные браузеры правильно показывают. (: Пойду мучиться с float’ом, а то файерфокс жуть какую-то с ним творит. Ждите вопросов. :lamer:

DeДверь
Логин:
Пароль:
	Автологин