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

дата: Апрель 15, 2011 автор: Категория: Создание сайтов, Флейм (обо всем) 
Метки: , , , ,


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

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

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

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

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

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

В связи с вышесказанным одной из сложностей при переходе с табличной верстки на дивную является материализация всевозможных багов, которые вылазят в 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">

  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.

Подписка на e-mail для лохов, RSS выбор настоящих мужиков!

Комментарии

4 комментариев к записи "10 штук, позволяющих победить internet explorer 6…"

  1. mdss | 20 Август, 2011 13:23 |

    самое интересное что в ИЕ 50%+50% != 100% ))
    Также еще в 6 ИЕ есть баг, что если у пустого слоя (например хочется полоску какую-нить забацать) указать маленькую высоту, то он ее в несколько раз увеличивает по высоте. Лечится просто прописыванием пустого комментария внутри слоя. Например было , а стало

  2. mdss | 20 Август, 2011 13:24 |

    парсер схавал теги (

    Например было [div class=»grey_line»][/div], а стало [div class=»grey_line»][!— —][/div]

  3. труль | 26 Ноябрь, 2011 2:06 |

    писец аффтар жот!!!

  4. Olunka | 12 Октябрь, 2012 14:35 |

    О боже, неужели кто-то еще пользуется ИЕ6?
    куда катить это мир…

Прокоментируйте запись...





Странные квадратные картинки