Отправляет email-рассылки с помощью сервиса Sendsay

WebDesign.Doc

Подписаться Бесплатная новостная рассылка Подписчиков 1.564 RSS
←   Март 2009   →
 1
 2
 3
03.03.2009
12:34:33
15:06:08
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
18.03.2009
10:29:06
17:34:55
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://internetsoft.16mb.com/
Открыта: 15-02-2005

Автор
Andrew

Статистика

1.564 подписчиков
0 за неделю
←   Все выпуски   →

WebDesign.Doc - электронная библиотека веб-мастера: Выпуск 155


WEbDESiGN.doc   //   №155
PHP от A до Я: всё для создания динамичного веб-сайтаSEO от A до Я: всё для продвижения вашего сайтаКлипарт: Web 2.0

МАСТЕРСКАЯ

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

оригинал: 10 Fixes That Solve IE6 Problems
перевод: http://dimox.name/

Так исторически сложилось, что браузер 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.

Надеюсь, что вам понравился этот выпуск рассылки и вы узнали что-то новое и полезное для себя. Если у вас есть пожелания или предложения как сделать рассылку лучше, присылайте их на наш e-mail: admin@wm-zone.info

ведущий рассылки - Путченков Дмитрий
WebMasterZone - http://wm-zone.info
В избранное