Давайте слегка видоизменим правило для блока с
идентификатором header в примере из листинга 4.4, определив содержимому
этого элемента высоту в 100 пикселов:
#header {
height: ЮОрх;
background: #f0f0f0;
border-bottom: dashed 2px #c00;
padding: 20px;
}
Какой должна быть высота «шапки» с учетом полей и рамки? Совершенно
верно, 142 пиксела: к высоте содержимого (100 пикселов) дважды
прибавляется значение свойства padding (по 20 пикселов сверху и снизу) и толщина
рамки, которая имеется только снизу (2 пиксела).
Открываем эту страницу в Firefox или Opera — да, результат вполне похож
на правду. Открываем в IE6— и удивляемся: «шапка» стала ниже почти в
полтора раза (рис. 4.8)! IE6, не найдя элемента в первой же
строчке кода, «мудро» рассудил, что искать ссылку на определение типа
документа дальше не имеет ну совсем никакого смысла, а потому решил
прикинуться предшествующей, пятой, версией, приняв пресловутые 100 пикселов
за общую высоту «шапки» нашей страницы с учетом полей и рамки.
Экспериментируем дальше. Давайте-ка попробуем ликвидировать строку
из начала кода документа.
Подумать только — все волшебным образом встало на свои места: IE6 стал
отображать нашу многострадальную страницу так же, как Opera и Firefox.
Капризы браузера IE6 при интерпретации страницы, которая использует CSS-
код, описанный в листинге 4.6, иллюстрируются на рис. 4.9.
Мораль сей басни такова. Когда условия работы меняются с «учебных» на
«боевые» и речь заходит о реальных проектах, не стоит безоглядно полагаться
186 Часть II. Применение веб-технологий стороны клиента для создания сайтов
Ш^шШК^м^?
Это область «шагалI»
^^:^^J.5J:.:X^u^:^]»|^J€!l Z:\examptes\04\06\l .htnJ 2j*:^0*«M
А это — абзац основного текста.
II еще один абзац основного текста.
Абзац примечания
Опять абзац основного текста.
И снова абзац примечания
‘ $1ОДУ
Это область «шапки».
А это — абзац основного текста.
II еще один абзац основного текста.
Абзац примечания
Опять абзац основного текста.
И снова абзац примечания
Рис. 4.8. Различия в интерпретации кода из листинга 4.6
браузерами Firefox 1.0 и Internet Explorer 6.0
*ШЖ
1
#»w П$Ы*, ш Лафаило* &рт? ърш**-
на***
*?
&>,*’*
[ fePfttt|#)z \exarnptes\04\06\t html
Эго область «шапки»
А это — абзац основного текста.
И еще один абзац основного текста.
Абзац примечания
Опять абзац основного текста.
И снова абзац примечания
a \&) Z.\exarnples\04\06\2 html
‘КТЬ
А зто — абзац основного текста.
II еще один абзац основного текста.
Абзац примечания
Опять абзац основного текста.
И снова абзац примечания
[й^^^^^^^шш^*^^^^
Рис. 4.9. Слева — документ содержит в первой строке объявление XML,
справа — объявление XML удалено
Глава 4. Использование блочной модели CSS2 для верстки сложных веб-страниц 187
на стандарты. Стараясь придерживаться их духа и буквы, где только это
возможно, необходимо, тем не менее, принимать во внимание и особенности
интерпретации тех или иных спецификаций реальными браузерами, которые,
к сожалению, пока что далеки от идеала.
Пока ситуация складывается таким образом, что от объявления XML в
первой строке XHTML-документов в реальной практике лучше воздерживаться,
ибо «народный браузер» IE6 (которым, по данным SpyLog, пользуются почти
73% посетителей сайтов Рунета) за объявлением XML не видит элемента
, влияющего на корректность отображения элементов
страницы.
К слову, повода для расстройства почти нет — ведь в главе 2 мы
акцентировали внимание на том, что объявление XML является факультативным,
необязательным элементом…
Линейные размеры изображений
CSS-свойства width и height можно использовать и для указания линейных
размеров графических изображений, связанных с веб-страницей при помощи
тегов .
Если говорить точнее, то даже не «можно», а «нужно». При явном указании
линейных размеров изображений браузер заранее отводит для них
соответствующие области, тогда как в противном случае страница многократно
перестраивается и «пляшет» по мере загрузки графики, что, очевидно, не
способствует комфортному восприятию контента пользователями.
В значениях свойств width и height, указывая как фактические, так и
отличные от реальных, совершенно произвольные размеры картинки в пикселах
(или в процентах), можно заставить браузер сжимать или растягивать данную
картинку.
Так вот, растягивать изображения таким способом вполне можно, а вот
сжимать — ни под каким предлогом нельзя.
|
5th Фев 2011
|
Теги:
|