Проблемы с совместимостью IE6 следует учитывать в макете веб -страницы

На следующем рисунке показана скорость просмотра браузера в деталях посетителя в системе статистики веб -сайта, а IE6 учитывает более 40%. Хотя существует много типов браузеров, только IE имеет много версий, таких как IE5.5, IE6, IE7, IE8 и т. Д. Среди этих многочисленных версий высокого класса IE6 все еще любит большинство пользователей, поэтому при печати IE6 не считается проблемой совместимости IE6, в противном случае он потеряет много посетителей.

Вот 10 вопросов, на которые необходимо обратить внимание в IE6:

Вам нужно добавить тип Doctype в верхней части страницы HTML. Конечно, строгая версия стоит рекомендовать, например:

<! Doctype html public -// w3c // dtd html 4.01 // en

http://www.w3.org/tr/html4/strict.dtd>

Или, xhtml Page! Doctype:

<! Doctype html public -// w3c // dtd xhtml 1.0 strict // en

http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>

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

Установка позиции: относительно решает более одной проблемы, особенно при установке выравнивания. Очевидно, что вам нужно понять, что абсолютное позиционирование относительно говоря. Может быть, потому что у вас нет настройки, и вы не знаете, что там все полетело. Например, если вы проектируете каждую статью, перед ней есть изображение, и, наконец, вы обнаружите, что на странице есть только одна картина, возможно, они перекрываются.

Это происходит от знаменитой ошибки двойного маржи IE6. Например, если вы проектируете плавание для Div и устанавливаете левые маржи: 5px;, это, вероятно, будет левым по марже: 10px в IE6. Здесь установите дисплей: встроенный для плавучих элементов для решения проблемы.

Многие проблемы IE6 (или IE7) могут быть решены путем установки значения Haslayout. (Если вы не знаете, что такое Haslayout, пожалуйста, смотрите здесь)

Самый простой способ установить значение haslayout для элемента - добавить высоту или ширину CSS (конечно, также можно использовать Zoom, но это не является частью CSS). Рекомендуется установление определенного значения, но иногда это не обязательно означает, что высота. Здесь вы можете использовать высоту: 1%. Если родительский элемент не устанавливает высоту, физическая высота элемента не изменится, но он уже имеет свойство Haslayout.

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

• Убедитесь, что дисплей: inline устанавливается на плавающий элемент;

• Используйте маржу вправо: -3px в плавающих элементах;

• Добавьте комментарий IE после последнего элемента плавающего элемента, например: <!-[если! IE]> Пусть ваш комментарий здесь ... <! [Endif]->

• Добавьте Div в последний элемент (это установлено ширину до 90% или другой аналогичной высоты)

Обновление: самый простой способ - удалить все комментарии. (Благодаря Тянь Вейер за ее совет, я сам не сталкивался с этим, но после того, как я гугл, я обнаружил, что этот метод также можно решить, и это рекомендуемый метод.)

Вы можете проверить больше объяснений об этом в PlosiciseAryThing.net.

6. Используйте только наклонение в теге <a>, IE6 поддерживает только тег <a> для отображения стиля зависания

Конечно, вы все еще можете решить этот метод через JS. Тем не менее, речь идет о доступности. Рекомендуется не устанавливать важный контент в Hover, реализованный с использованием JS.

Например, Min-Height может избежать использования CSS для достижения совместимости с IE.

#Element {

мин-высот: 20 эм;

Высота: Авто! Важно;

высота: 20 эм; /* Let IE6 отобразить эту высоту*/

}

IE6 не может правильно идентифицировать Min-Hight. Вы можете установить фиксированную высоту, чтобы разрешить IE6 до 20 EM. Несмотря на это, он изменит свою высоту из -за размера контента. Другой способ - использовать расширенные селекторы:

#Element {

мин-высот: 20 эм;

высота: 20 эм;

}

/ * Игнорировать IE6 */

#Element [id] {

Высота: Авто;

}

Шкала будет запутать IE6, если вы не добавите точную высоту в родительский элемент. В противном случае, добавьте! Важно для других, например:

тело{

Маржа: 2% 0! Важно;

Маржа: 20px 0; /* IE6 читаемой*/

}

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

Во многих случаях решение проблемы может занять больше времени, чем рефакторирование вашего кода.