Статьи

10 исправлений, которые решают проблемы IE6

Март 2, 2019

Как исправить IE6 Мы знаем, что IE, вероятно, будет в течение некоторого времени , но можем ли мы все еще поддерживать браузер и избегать хаков и условных CSS ? Вот 10 исправлений, позволяющих решить большинство проблем IE6 с помощью корректного кода HTML и CSS…

1. Используйте DOCTYPE
Вы всегда должны помещать DOCTYPE вверху каждой HTML-страницы, и рекомендуется строгая версия, т.е. 

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

или для XHTML: 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Последнее, что вам нужно, это переход IE6 в режим причуд — он уже достаточно причудливый.

2. Установите положение: относительное
Установка элемента в position:relative Очевидно, что вы должны быть осторожны, чтобы абсолютно позиционированные дочерние узлы были соответственно переставлены.

3. Используйте дисплей: встроенный для плавающих элементов
Плавающие элементы с полем могут вызвать известную ошибку с двойным полем в IE6, например, вы указываете левое поле в 5px и фактически получаете 10px. display:inline

4. Установите элемент в hasLayout
Многие проблемы рендеринга в IE6 (и IE7) можно исправить, установив свойство элемента hasLayout. Это внутренний параметр IE, который определяет, как контент ограничен и позиционирован по отношению к другим элементам. Установка hasLayout также может быть важна, если вам нужно сделать встроенный элемент, такой как ссылка, в блок или применить эффекты прозрачности.

Самый простой способ установить hasLayout — установить высоту или ширину CSS (можно использовать масштабирование, но это не является частью стандарта CSS). Установка фактических размеров рекомендуется, но там, где это невозможно, вы можете использовать height:1% Если родительский элемент не имеет установленной высоты, физическая высота элемента не изменяется, но hasLayout включен.

5. Исправление ошибки повторяющихся символов
Сложные макеты могут вызвать ошибку, из-за которой последние несколько символов плавающего элемента могут появиться на очищенном элементе ниже. Есть несколько решений; немногие идеальны, и потребуется немного проб и ошибок:

  • убедитесь, что все плавающие элементы используют display:inline;
  • используйте margin-right:-3px; на последнем плавающем элементе
  • используйте условный комментарий в качестве последнего элемента в плавающем элементе, то есть <!--[if !IE]>Put your commentary in here...<![endif]-->
  • используйте пустой div в последнем элементе контейнера (также может потребоваться установить ширину в 90% или аналогичную)

См. Positioniseverything.net для полного описания проблемы.

6. Используйте только теги <a> для интерактивных и всплывающих элементов
IE6 может применять эффекты наведения CSS только к тегам <a>.

Вы также должны использовать их для элементов управления в виджетах на основе JavaScript, чтобы они оставались удобными для навигации. Есть несколько альтернативных вариантов, но теги <a> более надежны, чем большинство решений.

7. Используйте! Важные или расширенные селекторы для IE-специфичного кода
Все еще возможно написать корректный код, который специально нацелен на IE6, не прибегая к традиционным хаки или условным CSS в дополнительных файлах. Например, минимальные высоты могут быть определены с помощью кода: 

 
#element {
	min-height: 20em;
	height: auto !important; /* understood by all browsers */
	height: 20em; /* IE6 incorrectly uses this value /*
}

IE6 не понимает «min-height» и неправильно переопределяет «auto» высоту с 20em. Тем не менее, он увеличивает размеры, если контент требует больше места.

Другой вариант заключается в использовании расширенных селекторов, например, 

 
#element {
	min-height: 20em;
	height: 20em;
}

/* ignored by IE6 */
#element[id] {
	 height: auto;
}

8. Избегайте процентных размеров
Проценты смущают IE. Если вы не можете тщательно оценить каждый родительский элемент, их, вероятно, лучше избегать. Вы все еще можете использовать процентные значения в других браузерах с! 

 
body {
	margin: 2% 0 !important;
	margin: 20px 0; /* IE6 only */
}

9. Тестируйте рано и тестируйте часто
Никогда не покидайте тестирование IE6, пока ваш веб-сайт или приложение не будут готовы; проблемы будут хуже и займет больше времени, чтобы решить. Если ваш сайт работает в Firefox и IE6, он почти наверняка будет работать в других браузерах.

10. Рефакторинг вашего кода
Часто это может занять больше времени, чем переосмыслить проблему макета. Незначительные изменения HTML и более простой CSS часто более эффективны. Это может означать, что вы отказываетесь от совершенно легитимного кода, но при этом будет возникать меньше долговременных проблем, и вы знаете, как решить эту проблему в будущем.

Я пропустил ваше любимое исправление IE6? Комментарии и предложения приветствуются.

34
Share: