Статическое и относительное позиционирование CSS

Обход особенностей Internet Explorer

Имеется две особенности этой компоновки, которые приводят к отказу в Internet Explorer 6 для Windows. Одна из них состоит в том, что IE6 не поддерживает свойства min-width и max-width, другая в том, что IE известен плохой работой с процентами.

Можно использовать собственное средство компании Microsoft expression() для эмуляции ограничений по ширине. Оно получает выражение JScript в качестве аргумента и возвращает значение этого выражения. Это может создавать проблемы с производительностью, если выражение требует много вычислений, так как оно вычисляется всякий раз, когда браузеру необходимо получить ширину body. Также требуется, чтобы был активен JScript, но можно добавить постепенное сокращение возможностей, поэтому, если, скажем, JScript не будет доступен, то дизайн будет откатываться к чему-то, что все еще доступно. В этом примере мы сделаем компоновку полностью гибкой вместо созданного выше текучего дизайна с ограничениями, если JScript будет деактивирован.

Рекомендованным способом обработки правил стилей исправления ошибок в Internet Explorer является использование "условных комментариев". Это свойство, имеющееся только в браузере Microsoft, которое встраивает условную логику в комментарии HTML (существует специальная статья по условным комментариям на сайте dev.opera.com (http://dev.opera.com/articles/view/supporting-ie-with-conditional-comments/).

Добавьте следующие строки в код HTML, сразу перед тегом </head>:

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" href="layout-ie6.css">
<![endif]-->

Затем создайте новый файл с именем layout-ie6.css со следующим содержанием:

body {
  width: 50em;
  width: expression(w=document.documentElement.offsetWidth, em=document.getElementById("nav").offsetWidth/12, 
  (w<40*em?"40em"w>56*em? "56em": "auto")));
}

#wrapper {
  height: 1em;
}

#nav {
  margin-left: -22em;
  margin-left: expression((-(document.getElementById("wrapper").clientWidth))+ "px");
  left: 13em;
}

Это решает две проблемы в IE6. Вы используете выражения JScript для эмуляции свойств min-width и max-width, которые не поддерживает IE6, с гибким резервным значением 50em. Затем используется другое выражение JScript для задания левого поля в пикселях вместо процентов, снова с гибким резервом. Высота #wrapper служит только для запуска специфического свойства Microsoft hasLayout, которое требуется для правильной работы относительного позиционирования элемента навигации. Компания Microsoft документировала свойство hasLayout в MSDN, но этот документ не так просто понять.

Что тогда насчет IE7? Этот браузер поддерживает min-width и max-width, но он тем не менее позиционирует навигационный элемент неправильно - все та же ошибка hasLayout, что и в IE6, снова поднимает свою ужасную голову. Необходимо включать hasLayout на элементе #wrapper. К счастью, это можно сделать таким образом, который не компрометирует поддерживающие стандарты браузеры, поэтому не нужно создавать отдельную таблицу стилей для IE7; можно просто добавить следующее правило для манипуляций с оболочкой:

#wrapper {
  margin: 0 14em 0 12em;
  padding: 0 1em;
  min-height: 1em;
}

Задание минимальной высоты запускает hasLayout и не вызывает никаких проблем в других браузерах, и может поэтому находиться в основной таблице стилей.

Эти варианты обхода несовершенны, компоновка по-прежнему будет делать странные вещи в IE6 и IE7, если окно браузера изменяется до определенных размеров, хотя если страницу затем перезагрузить, компоновка снова будет выглядеть нормально.

Другие применения относительного позиционирования

Наиболее распространенное применение относительного позиционирования вообще не включает смещения сгенерированного бокса. Это может звучать странно, почему вы захотите использовать относительное позицонирование без смещения бокса? Причина будет раскрыта в следующей главе, так как она включает абсолютное позиционирование.

Задание position:relative (без смещения бокса) помогает также при некоторых странных ошибках воспроизведения в Internet Explorer. Оно задает имеющее дурную славу внутреннее свойство hasLayout, которое оказывает сильное влияние на то, как Internet Explorer представляет элементы.

Заключение

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

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

Контрольные вопросы

• Что произойдет, когда два смежных поля в контексте статического форматирования схлопываются, и одно из полей - или оба - являются отрицательными?
• Добавьте вертикальную границу между каждым из боковых столбцов и столбцом основного контента. Не забудьте, что все три столбца являются плавающими, поэтому высота элемента оболочки схлопывается до нуля.
• Как можно сделать, чтобы все столбцы имели одинаковую высоту (или по крайней мере казались такими), так чтобы фоновые цвета распространялись до нижнего колонтитула, независимо от того, какой столбец длиннее? (Подсказка: найдите "ложные столбцы" с помощью поисковой системы.)

Предыдущая статья - Плавающие элементы и очистка

Следующая статья - Абсолютное и фиксированное позиционирование CSS

Об авторе

Томми Олссон является прагматичным пропагандистом стандартов Web и доступности, который живет в малонаселенной области центральной Швеции. Он написал свой первый документ HTML в 1993 г. и является в настоящее время техническим Web-мастером для правительственного агентства Швеции.

Он написал пока одну книгу - Полный справочник по CSS (совместно с Полем О'Брайеном) - и поддерживает крайне нерегулярно блог с названием Кукушка-аутист (http://www.autisticcuckoo.net/).

Материалы этого курса имеют лицензию Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.