Повне керівництво по приборкання IE6

Використання умовних коментарів для IE6
Напрямок та фільтр IE6 c «вбудованими» CSS-Хакамі
Включення підтримки альфа-прозорості у PNG
Виправлення полів і відступів
Установка min-width / max-width і min-height / max-height
Усуваємо баг з подвійними полями
Частка потоку
Усунення інших проблем IE6
наостанок

Протягом багатьох років, Internet Explorer 6 (IE6) був нещастям для веб-розробників у всьому світі

Протягом багатьох років, Internet Explorer 6 (IE6) був нещастям для веб-розробників у всьому світі. Розробники та користувачі стали використовувати більш передбачувані, що відповідають стандартам, сучасні браузери, такі як Firefox, Opera і Safari. Тим часом, IE6 продовжує переслідувати наші дизайни, ховаючись в темних місцях, а вмирає болісно довго, в агонії. Оскільки ми очікуємо настання того великого і світлого дня, коли IE6 остаточно помре, так само як Netscape 4, давайте згадаємо про деякі користувачів, які, за різними сумним причин, продовжують мучитися з цим жахливим браузером.

Так що давайте відсвяткуємо останні дні IE6, з цим остаточним керівництвом з приборкання дикого звіра IE6.

У цій великій статті, ви познайомитеся з кращими методами підтримки IE6, включаючи спеціальні хакі, підтримку зображень, Боксові моделі, флоат, і багато іншого.

Використання умовних коментарів для IE6

Умовні коментарі грають важливу роль в нормальному поведінці IE6. Умовні коментарі це невеликі фрагменти коду, які включаються в вашу (X) HTML розмітку, що дозволяє вам надіслати або відфільтрувати певні версії Internet Explorer. Далі приклад умовного коментаря, які перенаправляє IE6 спеціальним повідомленням:

<! - [if IE6]> <p> Ой! Схоже ви до сих пір використовуєте Internet Explorer 6! Ви гідні більшого! </ P> <! [Endif] ->

Це дуже корисний метод додавання коду і контенту тільки для IE6. Інші браузери, побачивши цей умовний коментар, визначать його як звичайний (X) HTML-коментар і просто проігнорують його. Таким чином, коли ми адаптуємо наші веб-сторінки для IE6, умовні коментарі дозволять нам застосувати спеціальні CSS-стилі, без втручання в інші браузери. Хоча умовні коментарі є винаходом Microsoft, вони є найкращим хаком для конкретних версій Internet Explorer.

Найпростіший спосіб використання умовних коментарів для направлення і застосування стилів тільки для IE6 - це підключити CSS-файл тільки для IE6, в секції <head> ваших веб-сторінок:

<! - [if IE6]> <link rel = "stylesheet" href = "http: //domain.tld/ie6.css" media = "screen" /> <! [Endif] ->

Потім, в файлі ie6.css, ми можемо розмістити все IE6-хакі і інші хитрощі, що вимагаються цьому браузеру. Це дозволить нам об'єднати всі IE6-стилі в один CSS-файл, який буде повністю ігноруватися іншими браузерами. З таким методом застосування стилів до IE6, немає необхідності у використанні IE6-хаков, так званий «star-HTML» хак, або хак з підкресленням.

Напрямок та фільтр IE6 c «вбудованими» CSS-Хакамі

Незважаючи на користь умовних коментарів, бувають випадки, коли вам може знадобитися застосувати IE6-стилі, без використання додаткового CSS-файлу. Така ситуація може виникнути на етапі розробки сайту, коли набагато зручніше працювати з одним файлом стилів, в якому стилі для IE6 розташовані поруч з «нормальними стилями», для простого порівняння. Після того як розробка завершена, всі вбудовані CSS-хакі можна об'єднати в спеціальний IE6-CSS-файл, включений за допомогою умовних коментарів.

На щастя, з появою IE6, цих вбудованих CSS-методів з'явилася достатня кількість. Через кілька років, деякі з цих «хаков» піднялися в топі, опинившись надзвичайно корисними і ефективними для застосування до IE6. Напевно, найпоширеніший з таких вбудованих CSS-прийомів, хак під назвою «star-HTML»:

/ * Значення для IE6 * / * html #selector {color: red; }

У той час, як відповідні стандартам браузери ігнорують цей нелогічний селектор, IE6 трактує його як допустимий селектор, навіть якщо html найвищий елемент в дереві документа. Це дозволяє нам застосувати CSS-стилі тільки для IE6, без втручання в інші браузери. Найкраще з усього те, що цей метод для IE6 повністю правильний.

Також бувають випадки, коли нам необхідно заховати стилі від IE6. Наступний хак пропонує вирішити це за допомогою «фільтра дочірнього селектора», що дозволить нам застосувати CSS-стилі до всіх браузерам, за винятком IE6:

/ * Фільтр IE6 * / html> body #selector {color: red; }

Цей селектор також повністю валідний і застосовується до всіх, відповідним стандартам, браузерам. Цей метод дуже ефективний, так як IE6 просто не розуміє цей селектор.

Інші корисні методи напрямки і фільтрації IE6, включають хак! Important, який дуже зручно використовувати коли вам потрібно скасувати значення властивості для IE6:

#selector {width: 200px! important; / * Значення для інших браузерів * / width: 100px; / * Значення для IE6 і нижче * /}

Коли ці два однакових властивості знаходяться в одному селекторі, IE6 застосує друга властивість, якщо перша властивість включає директиву! Important. Інші браузери звичайно ж застосують декларацію! Important, тим самим дозволивши нам застосувати до IE6 інші значення властивостей.

Включення підтримки альфа-прозорості у PNG

Одним із найсумніших дефектів в IE6, є відсутність підтримки 32-бітної альфа-прозорості у PNG-зображень. При відображенні в браузері 32-бітних альфа-прозорих PNG, IE6 замінює всю прозорість на потворний сірий фон. На щастя, це добре відома і часто зустрічається проблема, для якої існує велика кількість обхідних шляхів і рішень.

Якщо відкласти в сторону заборона на використання альфа-прозорих PNG-зображень в цілому, можливо, найпростіший спосіб забезпечити візуальну сумісність з IE6 - це використовувати повністю прозорі PNG, які повністю підтримуються і правильно відображаються у всіх браузерах, включаючи IE6.

Найбільш практичним підходом буде використання 8-бітного, альфа-прозорого формату PNG, замість звичайного 32-бітного формату. Щоб його отримати, використовуйте програму Adobe Fireworks (Photoshop цього не вміє), збережіть своє альфа-прозоре PNG-зображення в 8-бітному форматі, і потім включите в свій дизайн, як зазвичай. 8-бітові PNG, можливо, не так красиво виглядають як 32-бітові версії, зате в IE6 вони будуть виглядати, так само як і в інших браузерах. Цей метод дозволяє вам застосовувати альфа-прозорість у всіх сучасних браузерах, без отримання потворного сірого фону в IE6.

Звичайно, є можливість включити в IE6 підтримку 32-бітної альфа-прозорості. Існує безліч різних скриптів, що включають таку функціональність, але всі вони ґрунтуються на розробці Microsoft, фільтрі AlphaImageLoader, який можна включити в ваш CSS-файл наступним чином:

* Html .iepngfix {behavior: url (iepngfix.htc); }

Щоб змусити це працювати, вам знадобиться завантажити ці два файли , І розташувати їх в тій же папці, що і ваш CSS-файл. Перший файл - це прозоре gif-зображення, і другий файл це HTC-скрипт, який надає IE6 (і нижче) функціональність, яка потрібна для 32-бітної альфа-прозорості. Це базова реалізація фільтра AlphaImageLoader, більш розширена функціональність також можлива, з використанням великої кількості безкоштовних скриптів. Ось деякі з моїх улюблених:

Виправлення полів і відступів

Ранні версії Internet Explorer неправильно інтерпретували модель боксів, включаючи рамки і внутрішні відступи при підрахунку ширини контенту. Наприклад, погляньте на наступний випадок:

div {border: 10px solid black; padding: 10px; height: 100px; width: 100px; }

В сучасних браузерах, висота і ширина цього блоку, буде розрахована відповідно до специфікації W3C як 100px + 20px + 20px = 140px. У ранніх версіях IE, незважаючи на це, і висота, і ширина, буде помилково розрахована в 100px. Ця різниця відповідає за розробку безлічі невідповідностей між відповідними стандартам браузерами і старими версіями Internet Explorer.

На щастя, неправильна модель боксів була переглянута в IE6, який спромігся повернути правильну ширину для веб-сторінок, що включають повний DOCTYPE. Коли присутній повний DOCTYPE, IE6 включає один з двох «який працює в стандарті режим» або «майже який працює в стандарті режим», обидва ці режими, дозволяють IE6 правильно інтерпретувати боксову модель. Якщо ж повний DOCTYPE не включений в веб-сторінку, IE6 повернеться в «quirks mode», і буде інтерпретувати боксову модель неправильно.

Таким чином, проблема боксової моделі легко вирішується в IE6, шляхом включення повного DOCTYPE і подальшої роботи в стандартному режимі. Але якщо вам раптом знадобиться попрацювати в режимі quirks mode, найпростіший спосіб уникнути застосування внутрішніх відступів і рамок до елементів - задати їм точну ширину. Ви завжди можете застосувати внутрішні відступи і / або поля до закритих елементів.

Незважаючи на ці рішення, можуть виникнути ситуації, коли необхідно точно контролювати висоту і ширину конкретних елементів. У цих випадках, ми можемо використовувати для цього «Tan Hack»:

#selector {border: 10px solid black; padding: 10px; height: 100px; width: 100px; } * Html #selector {\ height: 140px; / * Значення для IE5 і IE6 в режимі quirks mode * / he \ ight: 100px; / * Значення IE6 в стандартному режимі * / \ width: 140px; / * Значення IE5 і IE6 в режимі quirks mode * / w \ idth: 100px; / * Значення IE6 в стандартному режимі * /}

У першому наборі правил, ми застосовуємо ширину і висоту в якості звичайних значень, для відповідних стандартам браузерів. Потім, у другому наборі правил, ми прораховуємо неправильну боксову модель в IE5 і IE6, в режимі quirks mode, шляхом коригування значень висоти і ширини, включаючи додаткові відступи і ширину рамки.

Установка min-width / max-width і min-height / max-height

Крім боксів, IE6 не розуміє максимальної і мінімальної висоти і ширини. Це неймовірно сумний факт для розробників, оскільки безлічі макетів потрібні ці властивості для нормального функціонування. В сучасних браузерах, ми можемо використовувати наступний CSS для досягнення різних цілей:

div.max-height {max-height: 333px; } Div.min-height {min-height: 333px; } Div.max-width {max-width: 333px; } Div.min-width {min-width: 333px; }

Звичайно ж, цей спосіб занадто простий для Internet Explorer, який абсолютно не розуміє ці базові CSS-властивості. На щастя, IE підтримує свій власний, пропріетарний атрибут expression (вираз), який дозволяє нам використовувати JavaScript-вирази для управління властивостями (X) HTML-документа, такими як max / min-width і max / min-height. Наприклад, для того, щоб вказати значення width за допомогою атрибута expression, нам потрібно написати наступне:

div {width: expression (333 + "px"); }

... Що еквівалентно цього

div {width: 333px; }

Існує два мінуси у використанні атрибуту expression. По-перше, оскільки вираження, по суті є JavaScript-ом, вони не будуть працювати з відключеним JavaScript-ом в браузері користувача. По-друге, використання CSS-виразів для властивостей min / max, дуже ресурсномістких і може негативно вплинути на продуктивність браузера. Однак не варто забувати, що властивості max / min-widths / heights є важливим інструментом в роботі веб-дизайнера. Так що, беручи до уваги ці фактори, дивіться далі деякі корисні CSS-вирази, що включають повну функціональність min / max в IE6.

max-width

/ * Max-width для IE6 * / * html div.max-width {width: expression (document.body.clientWidth> 776? "777px": "auto"); } / * Max-width для звичайних браузерів * / div.max-width {max-width: 777px; }

min-width

/ * Min-width для IE6 * / * html div.min-width {width: expression (document.body.clientWidth <334? "333px": "auto"); } / * Min-width для звичайних браузерів * / div.min-width {min-width: 333px; }

max-height

/ * Max-height для IE6 * / * html div.max-height {height: expression (this.scrollHeight> 332? "333px": "auto"); } / * Max-height для звичайних браузерів * / div.max-height {max-height: 333px; }

Хороша новина в тому, що ми можемо пропустити божевільні JavaScript / CSS вирази, коли застосовуємо мінімальну висоту в IE6. завдяки Dustin Diaz , Ми можемо встановити min-height в IE6, з цим фрагментом CSS:

min-height

/ * Min-height для IE6 * / div.min-height {min-height: 500px; height: auto! important; height: 500px; }

Усуваємо баг з подвійними полями

Більшість веб-дизайнерів, що займаються розробкою сайтів добре знайомі з проблемою подвійних полів в IE6. Цей противний баг з'являється коли ви призначаєте float будь-якого елементу (такого як div) в одній директиві, а потім застосовуєте поля в тій же самій директиві. Наприклад, якщо ми зробимо так:

div {float: right; margin-right: 10px; }

..IE6 (зазвичай) подвоїть розмір поля до 20px, без будь-яких підстав. Немає потреби говорити, що це баг подвійних полів зруйнував безліч прекрасних дизайнів, викликаючи біль і страждання розробників.

На щастя цей баг легко вбити. Просто змінити тип відображення елемента, до якого застосовується float, з типу block на тип inline, в такий спосіб:

div # selector {float: right; margin-right: 10px; } * Html div # selector {display: inline; / * Вбиваємо баг з подвійними полями * /}

Це вирішує баг з подвійними полями 99% випадках. У тих же випадках, коли це рішення не допомагає, ви можете обійти цю проблему, шляхом видалення полів і установки внутрішніх відступів у батьківського елементу, або безпосередньо у елемента, до якого застосовано float.

Частка потоку

Частка потоку від флоат - інша загальновідома задача, не тільки в IE6, але і в багатьох сучасних браузерах. В ідеальному світі, одні елемент, що містить інший плаваючий елемент, повністю ізолює його від навколишніх елементів. А в реальному світі веб-браузерів, флоат, часто не ізольовані. Коли таке трапляється, ми зазвичай говоримо, що плаваючий елемент не був «очищений» його батьківським елементам. Хороша новина в тому, що існують різні, прості способи чистити флоат в IE6 та інших браузерах.

Один з найстаріших способів очистити потік від флоат - використовувати clearfix хак . Ця CSS-техніка, працює за допомогою генерації контенту після батьківського елемента, використовуючи CSS-псевдо-клас: after. Згенерований контент, згодом чистить плаваючий елемент. Далі типовий приклад:

.clearfix: after {content: ""; display: block; height: 0; clear: both; visibility: hidden; } .Clearfix {display: inline-table; } / * Hides from IE-mac \ * / * html .clearfix {height: 1%;} .clearfix {display: block; } / * End hide from IE-mac * /

Щоб використовувати цей метод очищення потоку, розташуйте його в вашому CSS-файлі, і замініть всі рядки .clearfix на селектор елемента, який потребує очищення від своїх плаваючих нащадків.

Інший CSS-метод очищення потоку - просто призначити float елементу-контейнера. Наприклад, якщо ви призначаєте float зображенні, знаходиться в контейнері div яка не ізолює її, просто використовуйте наступний CSS:

div {float: left; }

Потім, якщо містить елемент, повинен вести себе як звичайний, блоковий елемент, застосуєте до нього ширину в 100%, щоб прибрати простір для наступного елемента.

div {float: left; width: 100%; }

Все б добре, але є спосіб очищення потоку і краще цього. Просто застосуєте властивість overflow, до контейнера div, і він автоматично буде розширюватися по вертикалі і очищати float у дочірніх елементів. Ось приклад:

div.container {overflow: hidden; width: 100%; }

Призначення ширини для блоку обов'язково для Internet Explorer і Opera, але це не означає, що ширина повинна дорівнювати 100%, ви можете використовувати будь-яку ширину і одиниці виміру, які вважаєте потрібними. Якщо не хочете вказувати ширину (width), замість цього ви можете вказати висоту (height). Для властивості overflow, також, можуть бути використані будь-які з перерахованих значень:

auto - відображає смуги прокрутки, якщо контент перевищує зазначену ширину
hidden - ніколи не відображає смуги прокрутки, навіть якщо контент не вміщується в зазначені розміри
scroll - завжди відображає смуги прокрутки, навіть якщо в них немає необхідності.

Також, цей метод працює для очищення потоку від плаваючих елементів, бувають випадки, коли властивість overflow може перешкодити іншим аспектам дизайну. Якщо це трапиться, ви можете спробувати обмежити застосування overflow, використовуючи overflow-x: hidden або overflow-y: hidden. І пам'ятайте, що значення ширини елемента, можна замінити на значення висоти.

Усунення інших проблем IE6

На завершення статті, давайте розглянемо кілька інших проблем, часто зустрічаються в IE6. Ці складності, а також способи їх усунення, досить прості, так що я не буду довго розповідати про них, і перейду прямо до справи.

відносне позиціонування

Використання position: relative в своїй роботі, можливо, найпростіший спосіб внести плутанину в IE6. Сучасні браузери, без проблем відображають вкладені елементи, позиційований щодо, але в IE6, часто з'являються проблеми з трохи більш складною розкладкою. На щастя, є досить просте рішення - установка hasLayout, шляхом додавання zoom: 1; кожному, щодо позиціонувати, елементу.

.selector {position: relative; } * Html .selector {zoom: 1; }

Пам'ятайте, що ви не належні застосовувати zoom: 1; до будь-яких строкових (inline) елементам, тому що, в цьому випадку IE6, буде трактувати їх, як блокові елементи. Не забувайте про це, і в наступних рішеннях.

негативні поля

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

.selector {margin: -1.5em; } * Html .selector {position: relative; zoom: 1; }

Пам'ятайте, про призначення блоку zoom: 1, яке необхідно, тому що це відносне позиціонування.

Усунення проблем з overflow

Використання overflow в IE6 іноді може привести до несподіваних, нез'ясовним проблем з відображенням. На щастя, ми можемо дозволити безліч overflow-залежних проблем, шляхом установки hasLayout за допомогою - як ви вже, напевно, здогадалися - zoom: 1. Далі приклад:

.selector {overflow: hidden} * html .selector {zoom: 1; }

Інша, дивна проблема з overflow, пов'язана з установкою властивості font-style: italic, яке розтягує ширину батьківського елемента. Ця проблема вирішується шляхом застосування наступного CSS до батьківського елементу:

* Html .selector {overflow-x: hidden; }

Вибудовування плаваючих елементів

Коли ви застосовуєте float до елементів з фіксованою шириною, смороду розташовуються горизонтально, заповнюючі всю ширину батьківського елемента. Прінаймні так поводять блоки, в більшості браузерів. В IE6, плаваючі блоків НЕ БУДУТЬ вібудовуватіся в одну лінію, натомість, смороду скоріше вішікуються Драбинко. Хороша новина в тому, что є ціліх два решение цієї проблеми. Перше - це застосувати властивість line-height: 0, до батьківського елементу:

.selector {float: left; width: 100px; clear: none; } * Html .selector {line-height: 0; }

Інший спосіб - по черзі вказати кожному плаваючого елементу, властивість display: inline.

.selector {float: left; width: 100px; clear: none; } * Html .selector {display: inline; }

Усунення проблем зі списками

Нарешті, якщо IE6 вирішить додати додаткові рядки (li) після закінчення вашого списку (ul), додавання HTML-коментаря, чарівним чином вирішить цю проблему. Ось як буде виглядати ваш код до і після застосування цього коментаря:

до:

<Ul> <li> Firefox </ li> <li> Opera </ li> <li> Safari </ li> <li> Internet Explorer </ li> </ ul> <li> Internet Explorer </ li> < li> Internet Explorer </ li>

після:

<Ul> <li> Firefox </ li> <li> Opera </ li> <li> Safari </ li> <li> Internet Explorer </ li> <- IE6 fix -> </ ul>

наостанок

Звичайно все без винятку верстальники, і багато звичайні користувачі не люблять Internet Explorer версії 6, але погляньте на результати голосування за два тижні:

[Poll id = "2"]

На жаль проголосувало невелика кількість людей, але все ж варто задуматися, чи так уже сильно, ми хочемо позбутися цього браузера?

Переклад статті « Definitive Guide to Taming the IE6 Beast «, Автор Jeff Starr

ClientWidth> 776?
ClientWidth <334?
ScrollHeight> 332?

Статьи