100 div-ов

назад далее

Можно заметить, что:

• Internet Explorer 5 почему-то пытается сохранить размер вложенного контейнера без изменений, но margin и padding отсчитывает вовнутрь, добавляя их неопределенную комбинацию к внешнему контейнеру наружу, до тех пор, пока высота или ширина контейнера не станет отрицательной. После этого отображение прекращается. При этом делается неуклюжая попытка наложить margin на padding и добавить то что получилось после округления к внешнему контейнеру. Последний отображаемый слой отмечен зеленым цветом. Internet Explorer 7 продолжает расширение границ внешнего контейнра бесконечно.
• FireFox назначил margin и padding нереальные значения, так что в сумме получилось 2. Возможно, он просто отбросил margin. Но при этом он почему-то явно предпочитает верхний и левый padding нижнему и правому. Но зато размеры контейнеров строго соблюдаются, что кажется весьма неожиданным для данного примера.
• Opera, как обычно в своем репертуаре, нечто среднее между Internet Eplorer и FireFox. Она, как FireFox, отбрасыает margin, но зато, как Internet Explorer расширяет контейнер. Но не во все стороны. Почему то с правой стороны контенера она решила снова вести себя как FireFox и отросила и margin, и padding.

Попробуем исправить этот пример, чтобы он стал ближе к реальности, устранив из него нелепое противоречие. Мы не будем назначать внутренним контейнерам нереальной ширины и высоты.

Internet Explorer 5 оказался единственным броузером, который правильно отобразил размеры контейнера, но только если он пуст. То, что происходит в FireFox и Opera не поддается никакому логическому осмыслению. Они почему-то они решили, что теперь размер контейнера можно изменить, но уже вовнутрь, а не наружу, как в Internet Explorer 7.

И, наконец, проверим как в самом деле складываются margin и padding контейнеров.

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

• Internet Explorer 7 складывает верхние, левые и правые margin и padding, отбрасывая margin снизу.
• FireFox и Opera, похоже, вообще игнорируют margin.
• Internet Explorer 5 складывает только левые и правые margin и padding.

Разночтения и общая неожиданность модели складывания границ Internet Explorer создает любопытную неопределенность в том, какую именно модель вызваны реализовать box-sizing: border-box; -moz-box-sizing: border-box. Посмотрим на последнем примере.

Мы видим, что в данном случае иммитация модели поведения Internet Explorer полностью игнорируется.

Хочется отметить, что хотя модель сложения margin и padding в Internet Explorer и неправильна, она является более выгодной и рациональной, так как она ни при каких условиях не нарушает областей владений parent-child и поэтому мы никогда не теряем никаких элементов страницы. В FireFox и Opera внутренний контейнер может накрыть внешний, и никакие box-sizing и -moz-box-sizing нас не спасут.

(По последним сведениям из Opera удалена box model quirk (box-sizing: border-box;) в quirks mode.)