TML, CSS, СКРИПТЫ: практика создании сайтов

Для сайтов, сверстанных с

применением блочной модели CSS, характерно контролируемое развитие по

горизонтали в сочетании со «стихийным» развитием по вертикали.

Особенности интерпретации свойств width и height

различными браузерами

Я хотел бы лишний раз подчеркнуть, что значения свойств width и height,

согласно стандарту, относятся только к размерам содержимого блочного

элемента— без учета полей, рамки и отступов. Иными словами, значения

СВОЙСТВ padding, border-width И margin дополнительно прибавляются К

значениям width И height.

И вот здесь начинается самое интересное. Ибо некоторые браузеры вольны

интерпретировать положения рекомендаций W3C, мягко говоря, весьма

своеобразно.

Так, например, Internet Explorer 5.x (за исключением версии 5.5 для

Macintosh) в пику стандарту трактует значения свойств width и height как

ширину и высоту блочного элемента с учетом величин полей (padding) и

толщины рамки (border-width), но все же без учета отступов (margin).

( Примечание ^

Доля IE5 среди предпочтений пользователей Рунета стремительно падает —

так, осенью 2004 г. она составляла порядка 20%, а в марте 2005 г., когда я пи-

Глава 4. Использование блочной модели CSS2p/w верстки сложных веб-страниц 183

сап эти строки, сервис глобальной статистики SpyLog (все тот же gs.spylog.ru)

фиксировал значение, не дотягивавшее до 14%. Тем не менее это все еще

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

Если существует потребность в том, чтобы размеры какого бы то ни было

элемента были точными при отображении страницы во всех сколько-либо

распространенных сегодня графических браузерах, придется прибегать к

вложенности. В этом случае один блок, для которого определены нулевые

значения величины полей и толщины рамки, выступает в качестве

«подложки» для другого блока.

j Листинг 4.5, Преодоление несовместимости IE5 с современными

| рекомендациями W3C

Отображение страницы, описанной в листинге 4.5, демонстрируется на

рис. 4.7.

Этот блок имеет ширину

300 пикселей с учетом полей и

толщины рамки во всех

распространенных ныне

графических браузерах.

||Готов

L т ft iw— т Л i mi и i —I mi iw i — mtt liini

Рис. 4.7. Веб-страница, описанная в листинге 4.5

Впрочем, некоторые не слишком дальновидные разработчики поступают

гораздо проще. А именно, подготавливают шаблон страниц сообразно

правилам, принятым в IE5, и не включают в код ссылку на определение типа

документа (элемент). Тогда и в IE6, и в Opera 7—8 такая страница

отображается «по старинке», в режиме обратной совместимости, с

использованием тех же самых представлений о сути вещей, которыми «радует» нас

пятая версия браузера Internet Explorer.

Такой подход, конечно же, нельзя назвать правомерным. Ибо веб-страница,

не содержащая в своем коде ссылки на определение типа документа, никогда

не пройдет проверку валидатором (о чем мы говорили еще в главе 2).

А теперь — внимание, еще один «приятный» сюрприз, подготовленный для

нас компанией Microsoft. Дело в том, что IE6 работает в режиме обратной

Глава 4. Использование блочной модели CSS2flnn верстки сложных веб-страниц 185

совместимости с IE5 в любом случае, если только правильный элемент

не встретится этому замечательному браузеру в самой первой

значащей строке кода.

А что у нас в первой строке кода? Объявление XML! Элемент

идет следом. Opera его исправно распознает, а вот для IE6 этой строчки будто

бы и нет вовсе.

Предлагаю поставить опыт.