Библиотека Интернет Индустрии I2R.ru

Я тут не буду долго и нудно (нет ничего более нудного, чем спецификации. Например, спецификацию CSS2 я читал маленькими порциями, но все равно нападала такая скука, что хотелось быстренько закрыть окно браузера и пойти поспать часок-другой) разжевывать стандарт этой самой блоковой модели, однако совсем кратенько все же стоит пройтись.

Итак, всю страницу можно разбить на так называемые блоки. Отдельный блок представляет из себя вот что:

В центре находится, собственно, содержимое блока, а вокруг него отступы (paddings), границы (borders) и поля (margins).

Вот для примера создадим какой-нибудь блок:

И еще один.

Вот уж не знаю, как это выглядит в вашем браузере, а вообще в различных браузерах вот так:

	Microsoft Explorer 5.0
	Microsoft Explorer 6.0
	Mozilla 0.9.1
	Opera 5.02

	Microsoft Explorer 5.0
	Microsoft Explorer 6.0
	Mozilla 0.9.1
	Opera 5.02

Итак, что мы видим. Для начала отметим, что если содержимое превосходит ширину блока, то в браузерах фирмы Microsoft растягивается сам блок, тогда как в других браузерах размеры блока строго сохраняются, а вот содержимое выходит за пределы блока. Первое несовпадение. Вопрос, как все же лучше, явного ответа не имеет. Надо признать, что и то и другое решение не выбиваются из спецификации CSS, так что в принципе все правильно. Но, на мой взгляд, решение Microsoft лучше. Хотя этот вопрос очень спорный.

Теперь посмотрим на второй блок, в котором содержимое укладывается в заданную длину. Видим, что в MSIE 5 отображение этого блока отличается от всех остальных браузеров. Причина в том, что браузер Microsoft Explorer 5 некорректно поддерживает боксовую модель. На рисунке четко видно, в чем заключается противоречие.

В CSS1 атрибут width - это расстояние между правой и левой границей прямоугольника, ограничивающего содержимое блока. В MSIE 5.x кроме того в атрибут width еще включаются границы (borders) и отступы (paddings), что неверно.

Есть еще одно отличие. В MSIE 5-6 фоновый цвет распространяется только на сам контент и на отступы (paddings), а в остальных браузерах еще и на границы (borders). И, опять же, реализация Microsoft предпочтительнее.

Вы еще не забыли о конечной цели? О переходе от табличной верстки к верстке слоями? Нет? А вот на пути у нас встала и первая преграда, а именно браузер Microsoft Internet Explorer 5.x. Проблему несоответствия ширины (и выстоты тоже) блоков надо решать, и это действительно важно. Решение, как вы догадываетесь, есть. Его придумал некто Tantek Celik. Все по порядку.

Допустим, у нас есть блок вот с такими параметрами:

#boxing {
 border: 20px solid;
 padding: 40px;
 background: #ffc;
 width: 300px;
}

Здесь поля нулевые, так что во всех браузерах, которые корректно поддерживают стандарт CSS1 общая ширина блока будет 20+40+300+40+20=420px. А вот в MSIE 5.x границы и отступы входят в те самые 300px, то есть для этого браузера ширина блока будет равняться ровно 300px, а на контент останется 300-20-40-40-20=180px.

А вот как можно это обойти:

#boxing{
 border: 20px solid;
 padding: 40px;
 width: 420px;
 voice-family: "\"}\"";
 voice-family: inherit;
 width: 300px;
}

html>body #boxing {
 width: 300px;
}

Почему это работает. Для начала мы указываем ширину 420px. Потом ставим voice-family: "\"}\"". MSIE 5.x под Win32 думает на этом месте, что блок стилей для элемента #boxing заканчивается. Таким образом, MSIE 5.x установит ширину блока 420px. Остальные "нормальные" браузеры на это не реагируют, то есть для них конец блока еще не наступил. Поэтому для них переписываем значение ширины, делая ее 300px. Далее, некоторые браузеры (например, Opera 5) могут неправильно интерпретировать строку voice-family: "\"}\"" и проигнорируют дальнейшие инструкции в этом блоке. Вот для них с помошью селектора CSS2 надо установить все ту же корректную ширину. Все.

Теперь обратим свои взоры к MSIE 6. В нем есть весьма хитрая фича, которая позволяет, так сказать, переключать режим браузера. В первом режиме блоковая модель совпадает с блоковой моделью MSIE 5. Во втором режиме используется стандартная блоковая модель CSS1. Переключение производится с помощью
!DOCTYPE. Вот эти декларации включает совместимый со стан- дартом режим:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">

А вот эта декларация не производит включения:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Зачем это может понадобиться разработчикам, вопрос сложный. Разве что для Intranet решений. Подробнее можно почитать здесь.

Одну проблему решили. А вот проблему с наложением фонового цвета на border решить нельзя. Впрочем, это не является препятствием для активного применения блоков. Продолжение следует...