Версия для печати

Полная версия

Буквально на любом сайте о CSS Вы найдете пару статей, посвященных ошибке блоковой модели в MSIE, благодаря которой неверно рассчитываются размеры блоков. Если Вы не поленитесь и потрудитесь над информацией таких сайтов, то сможете составить целый каталог методов устранения этой ошибки. Это объясняется тем, что проблема действительно серьезная, ее наличие может навсегда отбить охоту работу с CSS начинающему таланту. Но проблема заключается еще и в том, что методы устранения ошибки блоковой модели в большинстве своем основаны на использовании... ошибок, только уже других. Получается замкнутый круг. А что если наш любимый софтверный производитель возьмет и исправит свои баги? И именно те, которые Вы использовали? Или выпустит какой-нибудь самый-самый новый патч? Как Вы думаете, на что будет похож Ваш сайт, после такой акции со стороны разработчиков? А как быстро Вы сможете заметить проблему после исправления производителем ошибок? Вот то-то и оно. Но давайте по порядку

Итак, суть ошибки блоковой модели MSIE заключается в том, что он неправильно определяет размеры блока (это относится и к ширине, и к высоте, но в дальнейшем мы остановимся только на ширине). Рассмотрим следующий пример. Пусть у нас будет блок шириной 200px (width:200px). Последовательно к нему добавим границу (margin: 25px), рамку (border: 25px solid #000) и отступы (padding: 25px). В результате получим:

Если у Вас MSIE, то:
в первом случае у нас ширина блока 200px без всяких наворотов;
во втором случае к этим 200px добавилась ширина границы, увеличив наш блок на 50px (25px слева и 25px справа);
в третьем и четвертом случае мы получили блок шириной 250 px, внутрь содержательной (контентной) части которого (200px) были вписаны рамка и отступы.

Если у Вас не MSIE, то в каждом из примеров к ширине блока (контентной части) последовательно добавлялись граница (25+200+25=250), рамка (25+250+25=300) и отступы (25+300+25=350). В итоге ширина блока у нас получилась 350px. Почувствовали разницу?

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

Поставим задачу следующим образом: блок должен быть шириной 300 px со следующими параметрами:

Ширина здесь не задана специально. Мы воспользуемся тем фактом, что блок занимает все доступное ему пространство, поэтому впишем его внутрь блока шириной 300px (#ext{width: 300px}):

Этот вариант будет выглядеть одинаково во всех броузерах. Кроме того, он не зависит ни от каких ошибок и будет работать даже в исправленной блоковой модели MSIE.