Через 8 лет вы бы подумали, что все ошибки IE6 будут хорошо документированы и понятны. На самом деле, после этого времени вы бы надеялись, что большинство проблем будет исправлено в IE7 или IE8!
Со мной недавно связался расстроенный разработчик, который испытал исчезновение абсолютно позиционированных элементов в IE. Ошибка довольно причудливая, вы ее не часто испытываете, и в Интернете мало информации об этом. Надеюсь, эта статья поможет исправить эту ситуацию.
Проблема
Рассмотрим этот макет:
Элементы HTML кодируются в указанном порядке, то есть блоки содержимого 1 и 2, заголовок 3, правый блок 4 и нижний колонтитул 5. Внешний контейнер установлен в положение: относительный, и все элементы имеют ширину, назначенную таким образом, что IE hasLayout. Возможно, это не самый эффективный макет, но он действителен и работает во всех браузерах. За исключением IE6, IE7 и, возможно, IE8 … иногда .
При первом посещении страницы IE может отказаться показывать заголовок. Тем не менее, заголовок может появиться снова при посещении страницы с аналогичным кодированием на том же сайте. Он также может появиться снова, когда вы вернетесь на первую страницу?
Проблема вызвана ошибкой IE, которая скрывает абсолютно позиционированный элемент, когда он кодируется непосредственно перед или после плавающего элемента (он находится рядом с плавающим родным элементом). К сожалению, это условие не обязательно вызывает ошибку — это зависит от времени! Время загрузки файла и скорость рендеринга зависят от того, происходит это или нет. По моему опыту, ошибка, вероятно, возникла, если некоторые файлы были кэшированы.
Итак, вот пример страницы .
К сожалению, ошибка настолько непоследовательна, что невозможно создать такую, которая гарантированно будет работать (или потерпит неудачу?)
На сервере моего локального ПК заголовок исчезает в IE6, 7 и 8. На сервере SitePoint он исчезает только в IE6 и 7. У вас может быть другой опыт.
Кроме того, поддельные IE, такие как IETester , не обязательно демонстрируют ту же проблему. Я бы порекомендовал использовать реальную версию IE, такую как версия внутри виртуальной машины (см. « Запуск IE6, IE7 и IE8 на одной машине с использованием режима Windows 7 XP» или « Как запустить IE6, IE7 и IE8 в Windows 7 HOME» ).
Решение
К счастью, есть быстрое и грязное решение: просто поместите пустую непозиционированную статическую переменную <div> </ div> непосредственно перед и / или после абсолютно позиционированного элемента. В фиксированном примере пустой <div> </ div> после заголовка предотвращает возникновение проблемы.
Поклонники семантического HTML будут в ужасе, но я боюсь, что не будет исправления только для CSS … разве кто-нибудь знает иначе?
Лучшим решением будет более эффективный макет без абсолютно позиционированного заголовка. К сожалению, это может потребовать значительного количества повторного факторинга кода, если вы не тестировали IE рано и часто.
Вы сталкивались с этой странной ошибкой раньше? Или вы вообще отказались от IE?