Поиск 

10 фиксов, решающих проблемы Internet Explorer 6

Среда, Ноябрь 25, 2009 г.
Данный пост основан на переводе интересной англоязычной статьи “10 Fixes That Solve IE6 Problems“. Информация, изложенная ниже, будет полезна как начинающим верстальщикам, там и бывалым. Зеленым цветом я пометил пункты, содержимое которых полностью совпадает с моей точкой зрения и подтверждено моей практикой. Букв много, не пугайтесь =)

Так исторически сложилось, что браузер Internet Explorer 6, выпущенный аж 7,5 лет назад, до сих пор не дает себя забыть, все еще, к сожалению для практически любого веб-разработчика, являясь одним из самых популярных веб-браузеров. К сожалению – потому что поддержка веб-стандартов в нем далеко отличается от его следующих версий, а также других современных браузеров.

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

Следующие трюки (фиксы, исправления, рекомендации – называйте, как хотите) решают большинство багов IE6, заставляя его плясать под дудку веб-разрабочика. Причем, это вовсе не хаки и не условные комментарии, а соответствующие стандартам CSS-правила, которые сохраняют валидность CSS- и HTML-кода.

Итак…

1.Используйте DOCTYPE.

Всегда используйте запись, обозначающую тип HTML-документа (указывается в самом верху HTML-страницы). При этом тип документа Strict является рекомендуемым:

<!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">
Несмотря на то, что рекомендован Strict, на практике пока довольно часто приходится использовать тип документа Transitional, как минимум по той причине, что Strict запрещает применение параметра _target, а многие используют его по привычке.

2.Применяйте position: relative.

Установка элементу position: relative решает множество проблем, особенно, если вы наблюдаете невидимые или странно выровненные блоки. При этом необходимо помнить, что все дочерние элементы с position: absolute станут позиционироваться относительно этого элемента.

3. Используйтеdisplay: inline для плавающих элементов (те, к которым применяется свойство float).

У плавающих элементов, имеющих левый/правый отступ margin, в IE6 этот отступ удваивается. Т.е. если вы указали 5px, то в IE6 он будет 10px. Применение display: inline как раз решает данную проблему.

4. Придайте элементу свойство hasLayout.

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

Самый простой способ установки hasLayout – это указание CSS-свойств height или width (также может быть использован zoom: 1, однако это правило не является частью стандарта CSS). Т.е. рекомендуется устанавливать фактические размеры элемента: высоту или ширину, однако там, где это невозможно сделать, можно использовать правило height: 1%. Вот примерчик:

<div class="block">
какой-то текст
    <div class="absolute">это позиционируем абсолютно</div>
</div>
.block {
   position: relative; /* для того, чтобы блок с .absolute позиционировать относительно этого блока */
   padding: 20px; /* трабл у некоторых дочерних элементов в IE6 часто возникает, когда у родителя установлен паддинг */
   height: 1%; /* вот оно, спасение для IE6 */
}
.absolute {
   position: absolute;
   bottom: 0;
   left: 0;
}

Довольно часто решить какой-либо баг в IE6 помогает одновременное использование правила position: relative и height:1%.

5. Устранение бага с повторяющимися символами.

Хитро структурированные CSS-макеты могут вызвать в IE6 ошибку, при которой несколько последних символов плавающего элемента могут дублироваться и вылезти на блок, очищающий (закрывающий) флоаты. Есть несколько решений:

- применить ко всем плавающим элементам display: inline;
- применить margin-right: -3px к последнему плавающему элементу (если вы заглянете в исходники, создаваемые генератором CSS-макетов, то найдете, что в большинстве из них для блока сайдбара используется данное правило, как раз для решения этого бага);
- поместить комментарий в самом конце плавающего блока, например: <!–– Здесь комментарий ––>;
- поместить пустой <div></div> в самом конце плавающего блока.

6. Используйте только тег <a> для кликабельных элементов и элементов, использующих :hover.

Эффект с помощью псевдокласса :hover в IE6 работает только для тега <a>. Также этот тег необходимо использовать для контроля с помощью JavaScript-виджетов, чтобы он был управляем с помощью клавиатуры. Есть несколько альтернативных вариантов, но тег <a> является более надежными, чем большинство решений.

7. Используйте !important или современные селекторы.

Все еще возможно написать CSS-код конкретно под IE, не прибегая к хакам или условным комментариям. Например, минимальная высота реализуется следующим образом:

#element {
    min-height: 20em;
    height: auto !important; /* понимают все современные браузеры */
    height: 20em; /* IE6 неправильно использует данное значение /*
}

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

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

#element {
    min-height: 20em;
    height: 20em;
}
/* IE6 проигнорирует это */
#element[id] {
   height: auto;
}

8. Избегайте процентных размеров.

Проценты путают IE6. Если вы не можете точно определить размер каждого родительского элемента, лучше отказаться от использования процентов. При этом можно использовать процентные размеры в других браузерах, например:

body {
    margin: 2% 0 !important;
    margin: 20px 0; /* только IE6 */
}

9. Тестируйте раньше и тестируйте чаще.

Не прекращайте тестировать в IE6 до тех пор, пока ваш сайт не будет завершен, иначе проблем будет еще больше, и это займет больше времени на исправление. Если ваш сайт корректно работает в FireFox и IE6, то почти наверняка он работает и в других браузерах.

10. Осуществляйте рефакторинг вашего кода.

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

Надеюсь, что данные подсказки найдут свою аудиторию, и тем, кто не знал про вышеописанные трюки, станет значительно легче справляться с сюрпризами Internet Explorer 6.

И еще хочется добавить, что я с большинством вышеуказанных рекомендаций уже очень близко знаком и постоянно имею с ними дело. Благодаря этим знаниям, я во-первых, значительно быстрее решаю все баги IE6, чем это делал ранее, во-вторых, если раньше я параллельно при верстке держал открытыми Оперу и IE6 (и еще несколько браузеров =), чтобы исправлять баги в IE6 по ходу, то теперь я сперва полностью верстаю, открыв только Оперу, а уже после окончания верстки открываю IE6 и быстренько исправляю все найденные баги.

Дополнения к списку приветствуются.

Взято с www.dimox.name

Теги: Internet Explorer | CSS | Браузер | Валидация | Верстка | Стандарты Автор: Mary | Просмотров: 4046 | Нет комментариев | print |

Похожие статьи

все похожие статьи 
Категории
ТОП 10 - Авторы
  1     Луна   1964     2.93   
  2     pobeda   487     2.96   
  3     Tais   444     3.11   
  4     Foma   139     2.92   
  5     Lubov   52     2.91   
  6     Angel   45     2.93   
  7     Dolores   45     2.77   
  8     Paradiz   31     2.84   
  9     Xenta   29     2.85   
  10     Pryanik   26     2.8   
все авторы 
Последние статьи

Торт Пьяная вишня

Понедельник, Апрель 01, 2019 г.
|
Луна | 1471 |

Вода

Среда, Январь 24, 2018 г.
|
Луна | 942 |

Фруктовые соки

Среда, Январь 24, 2018 г.
|
Луна | 808 |

Вода и жизнь

Среда, Январь 24, 2018 г.
|
Луна | 1362 |

Голубцы с грибами

Среда, Январь 24, 2018 г.
|
Луна | 1374 |
Популярные статьи

Мавритания

Понедельник, Март 14, 2011 г.
|
Луна | 6262 |
|
pobeda | 70069 |

Материки

Вторник, Май 11, 2010 г.
|
Tais | 327496 |

Айшвария Рай - биография

Вторник, Ноябрь 02, 2010 г.
|
pobeda | 39018 |

Облако тегов