Обход особенностей 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>:

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

Это решает две проблемы в 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; можно просто добавить следующее правило для манипуляций с оболочкой:

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

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

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

Заключение

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

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

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

· Что произойдет, когда два смежных поля в контексте статического форматирования схлопываются, и одно из полей - или оба - являются отрицательными?

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

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

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

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

Лекция 37:

Абсолютное и фиксированное позиционирование CSS

Аннотация: В данной лекции рассматривается абсолютное и фиксированное позиционирование, показываются особенности абсолютно позиционированных элементов в контексте потока документа. Рассматриваются вопросы определения позиции, размеров и расположения в третьем измерении абсолютно позиционированных элементов. Рассматривается понятие контекста стека, а также его разновидности: локального контекста стека. Также рассматриваются особенности элементов с фиксированным позиционированием и возможные варианты применения этих элементов

Введение

Теперь пришло время обратить наше внимание на вторую пару значений свойства position - absolute и fixed. Первая пара значений -static и relative - тесно связаны, и мы рассмотрели их достаточно подробно в предыдущей статье. Абсолютно позиционированные элементы полностью удаляются из потока документа. Это означает, что они вообще не оказывают влияния на свой элемент предок или на элементы, которые появляются после них в исходном коде. Абсолютно позиционированный элемент будет поэтому перекрывать другой контент, если этому не помешать специальными действиями. Иногда, конечно, это перекрытие является тем, что требуется, но нужно знать об этом, чтобы быть уверенным, что будет получена требуемая компоновка!Фиксированное позиционирование является на самом деле специальной формой абсолютного позиционирования, элементы с фиксированным позиционированием фиксируются относительно окна просмотра/окна браузера, а не объемлющего элемента, даже если страница прокручивается, они остаются в том же самом месте в окне браузера.В этой статье мы рассмотрим несколько практических примеров использования абсолютного и фиксированного позиционирования, а также некоторые особенности поддержки в браузерах, и исследуем концепцию z-индекса.

Статья имеет следующую структуру:

Прежде чем говорить обо всем этом, рассмотрим важную предварительную концепцию - объемлющие блоки.

Объемлющие блоки

Существенно важной концепцией, когда речь идет об абсолютном позиционировании, является объемлющий блок: блочный бокс, относительно которого определены позиция и размеры абсолютно позиционированного бокса.Для статических боксов и относительно позиционированных боксов объемлющий блок является ближайшим предком блочного уровня - элемент предок, другими словами. Для абсолютно позиционированных элементов, однако это немного сложнее. В этом случае объемлющий блок является ближайшим позиционированным предком. Под "позиционированным" понимается элемент, свойство position которого задано как relative, absolute или fixed - иными словами, любой элемент, кроме обычных статических элементов. Поэтому, задавая для элемента position:relative, мы делаем его объемлющим блоком для любого абсолютно позиционированного потомка (элементов потомков), появятся ли они непосредственно ниже относительно позиционированного элемента в иерархии, или ниже по иерархии.Если абсолютно позиционированный элемент не имеет позиционированного предка, то объемлющий блок называют иногда "начальным объемлющим блоком", что на практике совпадает с элементом html. При просмотре Web-страницы на экране это означает окно браузера, при печати страницы это означает границу страницы.Элементы с фиксированным позиционированием слегка от этого отличаются -- они всегда имеют начальный объемлющий блок в качестве своего объемлющего блока.Итак, давайте суммируем это в множестве простых шагов - чтобы найти объемлющий блок для элемента с position:absolute, необходимо сделать следующее:

1. Посмотрите на элемент предок абсолютно позиционированного элемента - имеет ли свойство position этого элемента одно из значений relative, absolute или fixed?

2. Если это так, то вы нашли объемлющий блок.

3. Если нет, перейдите в элемент предок элемента предка и повторите с шага 1, пока не найдете объемлющий блок или закончатся элементы предки.

4. Если вы дошли до элемента html, не найдя размещенного предка, то объемлющим элементом будет элемент html.

Система охраняемых территорий в США Изучение особо охраняемых природных территорий(ООПТ) США представляет особый интерес по многим причинам...

Что делать, если нет взаимности? А теперь спустимся с небес на землю. Приземлились? Продолжаем разговор...

Что будет с Землей, если ось ее сместится на 6666 км? Что будет с Землей? - задался я вопросом...

Что делает отдел по эксплуатации и сопровождению ИС? Отвечает за сохранность данных (расписания копирования, копирование и пр.)...

Не нашли то, что искали? Воспользуйтесь поиском гугл на сайте: