10 штук, позволяющих победить internet explorer 6…

Но сначала НЕНАВИСТЬ
В очередной раз тут столкнулся с тупизмом айтишников предприятия, которые упорно не хотели обновлять браузер ie6 на предприятии, а в частности в кабинете директора.

И мне пришлось потратить три дня на разъебку с его глюками, а так же главным глюком, тупо вылетания браузера при открытии сайта.
Причем ентот тупой айтишнег заявлял мне что если ie6 вылетает с ошибкой причем не на всех компах, а на определенной конфигурации системы, то это вина не устаревшего браузера и определенной конфигурации, а созданного мною сайта.
Спорил я с ним часа три, так же его не убедила статистика лайвинтернета что его использует 2,5% пользователей рунета, он сказал что статистика врет и у нас стопудово больше пользователей.
Ну а директора (который заказывал) соответственно не волнует браузеры не браузеры, у него просто эксплорер либо вылетал либо сайт кривой, а крайний соответственно я.

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

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

Я решил забацать для себя постег, ну авось и еще кому пригодится.

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

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

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

Итак…

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

   или (для XHTML):

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%. Вот примерчик:

   какой-то текст

   это позиционируем абсолютно

   .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.