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


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


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

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

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

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

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

Вариант 1:


Вариант 2:

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

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

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

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

2 <sergio.ga>.

Цитата:

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

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

Цитата:

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

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

* * *

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