Сегодня проблема блочной модели Internet Explorer по большей части не является проблемой. Большинство веб-разработчиков размещают <!DOCTYPE>
тег для обеспечения соответствия стандартам, и никто больше не заботится о поддержке Internet Explorer 5.5.
Тем не менее, некоторые разработчики выдвигают субъективные, концептуальные аргументы в защиту блочной модели IE. Они утверждают, что блочная модель IE более «интуитивна», чем модель W3C, потому что модель W3C измеряет содержимое блока, тогда как модель IE измеряет сам блок:
Я могу видеть их точку зрения, но в основном это субъективный аргумент, и самое главное - это соответствие стандартам .
Тем не менее, в последнее время я предпочел коробочную модель IE по серьезным практическим причинам. Блочная модель W3C затрудняет динамическое изменение размера элемента до точной ширины пикселя на экране другого элемента. Причина в том, что style.width
свойство элемента не учитывает общий размер элемента на экране: вам также необходимо учитывать любые дополнительные границы и отступы. Это не проблема, если оба элемента используют один и тот же класс CSS - но если у них разные классы CSS, это может стать невероятно сложной задачей.
Предположим, у нас есть два div: A и B. A жестко запрограммирован в html как div 400px, тогда как B динамически создается с использованием Javascript. Визуально мы хотим, чтобы B была точной шириной A. В старой модели IE Box это тривиально. Мы просто говорим: B.style.width = A.style.width
или даже B.style.width = A.offsetWidth + "px"
.
Но с блочной моделью W3C это не так просто. Теперь нам также нужно беспокоиться о таблицах стилей. Если B имеет тот же класс CSS, что и A, мы можем просто сказать B.style.width = A.style.width
. Но если этого не произойдет - а мы можем этого не хотеть по эстетическим причинам - у нас проблемы. Теперь мы должны принять во внимание общее количество пикселей на границе и заполнении как A, так и B. Это может быть особенно сложно, если граница и заполнение заданы в непоследовательных единицах (обычное явление, поскольку border часто представляет собой линию 1px, тогда как padding может быть указан в EMS). Затем мы сталкиваемся с практически невозможной задачей преобразования в общую единицу измерения (em в px или px в em). Все это только для того, чтобы два элемента div выстроились точно на экране.
Таким образом, в основном, блочная модель W3C вынуждает нас принимать во внимание проблемы с границами CSS и заполнением, когда мы устанавливаем размер элемента, тогда как блочная модель IE не делает этого, так как ширина измеряет весь размер блока (от конца до -конец), а не содержимое коробки. Это значительно упрощает динамический размер элементов по отношению друг к другу.
Все это кажется довольно веской причиной, чтобы отдать предпочтение блочной модели IE над моделью W3C (по крайней мере, концептуально - конечно, на практике блочная модель IE мертва).
Вопрос : Почему W3C выбрал эту модель коробки? Есть ли какие-то преимущества у блочной модели W3C, которых я просто не вижу? Или я просто преувеличиваю проблему здесь?
источник
Ответы:
Выбор, включать ли отступ и границу в ширину или нет, был произвольным. Единственное, что имело значение, это создание многоколоночных макетов. Однако вы должны учитывать тот факт, что в то время люди использовали таблицы для макетов в любом случае. Таким образом, эта забота не казалась достаточно важной, и они считали, что возможность указать точную ширину, которую сам контент будет занимать в CSS, кажется гораздо более ценной.
Для современных разработчиков ситуация выглядит совершенно иначе, поскольку они используют CSS для макетов и им приходится иметь дело с CSS-моделью бокса. К счастью, у нас есть возможность переопределить правила бокса, поэтому в большинстве случаев простое правило в верхней части таблицы стилей работает невероятно:
Цитирую Джеффа Кауфмана на эту тему :
Таким образом, блочная модель стала жертвой борьбы за власть между W3C и Microsoft.
источник
*
. Я предпочел бы выборочно переопределить его в тех местах, где это необходимо.