Пълното ръководство за опитомяване на IE6, друг блог на свободна практика
кратко и полезно за уеб разработката
Пълното ръководство за опитомяване на IE6
В продължение на много години Internet Explorer 6 (IE6) беше катастрофа за уеб разработчиците по целия свят. Разработчиците и потребителите започнаха да използват по-предвидими, съвместими със стандартите съвременни браузъри като Firefox, Opera и Safari. Междувременно IE6 продължава да преследва нашите проекти, криейки се на тъмни места и умирайки болезнено в агония. Докато очакваме с нетърпение този велик и светъл ден, когато IE6 най-накрая умре, точно както Netscape 4, нека си спомним някои от потребителите, които поради различни нещастни причини продължават да страдат от този ужасен браузър.
Така че нека отпразнуваме последните дни на IE6 с това най-добро ръководство за опитомяване на дивия звяр на IE6.
В тази обширна статия ще научите най-добрите практики за поддръжка на IE6, включително персонализирани хакове, поддръжка на изображения, модели на кутии, плаващи елементи и др.
След това във файла ie6.css можем да поставим всички IE6 хакове и други трикове, от които се нуждае този браузър. Това ще ни позволи да комбинираме всички IE6 стилове в един CSS файл, който ще бъде напълно игнориран от други браузъри. С този метод за прилагане на стилове към IE6 няма нужда да използвате хакове за IE6, така наречения хак "star-HTML" или хак за подчертаване.
IE6 посока и филтър с вградени CSS хакове
За щастие с появата на IE6 има много от тези вградени CSS методи. През годините някои от тези "хакове" се издигнаха до върха, доказвайки се като изключително полезни и ефективни, когато се прилагат към IE6. Вероятно най-често срещаният от тези вградени CSS трикове, хакът поднаречен "star-HTML":
Докато съвместимите със стандартите браузъри игнорират този неинтуитивен селектор, IE6 го третира като валиден селектор, дори ако html е най-високият елемент в дървото на документа. Това ни позволява да прилагаме CSS стилове само за IE6, без да пречим на други браузъри. Най-хубавото е, че този метод за IE6 е напълно правилен.
Има и моменти, когато трябва да скрием стилове от IE6. Следният хак предлага да се реши това с "детски селекторен филтър", който ще ни позволи да приложим CSS стилове към всички браузъри с изключение на IE6:
Този селектор също е напълно валиден и се прилага за всички съвместими със стандартите браузъри. Този метод е доста ефективен, тъй като IE6 просто не разбира този селектор.
Други полезни методи за насочване и филтриране на IE6 включват хака !important, който е много удобен, когато трябва да замените стойност на свойство за 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 файл по следния начин:
За да работи това, ще трябва да изтеглите тези два файла и да ги поставите в същата папка като вашия CSS файл. Първият файл е прозрачно gif изображение, а вторият файл е HTC скрипт, който предоставя на IE6 (и по-долу) функционалността, необходима за 32-битова алфа прозрачност. Това е основна реализация на филтъра AlphaImageLoader, възможна е и по-разширена функционалност с помощта на много безплатни скриптове. Ето някои от любимите ми:
Коригирайте полета и подложки
Ранните версии на Internet Explorer неправилно тълкуваха модела на кутията, включително граници и подложки при изчисляване на ширината на съдържанието. Например, разгледайте следния случай:
INмодерни браузъри, височината и ширината на това поле ще бъдат изчислени според спецификацията на W3C като 100px + 20px +20px = 140px . В по-ранните версии на IE обаче и височината, и ширината ще бъдат изчислени погрешно като 100px. Тази разлика е отговорна за много от несъответствията между съвместимите със стандартите браузъри и по-старите версии на Internet Explorer.
За щастие, моделът на неправилната кутия е преработен в IE6, което е доказано, че може да върне правилната ширина за уеб страници, които включват пълен DOCTYPE. Когато е налице пълен DOCTYPE, IE6 позволява един от двата „съвместим със стандартите режим“ или „почти съвместим със стандартите режим“, като и двата позволяват на IE6 да интерпретира правилно модела на кутията. Ако пълният DOCTYPE не е включен в уеб страницата, IE6 ще се върне в „режим на странности“ и ще интерпретира неправилно модела на кутията.
По този начин проблемът с модела на кутията се решава лесно в IE6 чрез включване на пълния DOCTYPE и продължаване в стандартен режим. Но ако внезапно ви се наложи да работите в режим на странности, най-лесният начин да избегнете прилагането на подложки и граници към елементи е да им дадете точна ширина. Винаги можете да приложите подложки и/или полета към затворени елементи.
Въпреки тези решения, може да има ситуации, в които трябва прецизно да контролирате височината и ширината на определени елементи. В тези случаи можем да използваме "Tan Hack" за това:
В първия набор от правила използваме ширината и височината като нормални стойности за стандартите на браузъра. След това, във втория набор от правила, изобразяваме грешен модел на кутия в IE5 и IE6, в режим на странности, като коригираме стойностите на височината и ширината, включително допълнителниподложка и ширина на границата.
Задаване на минимална ширина/максимална ширина и минимална височина/максимална височина
Освен кутии, IE6 не разбира максимална и минимална височина и ширина. Това е невероятно тъжен факт за разработчиците, тъй като много оформления изискват тези свойства, за да функционират правилно. В съвременните браузъри можем да използваме следния CSS за постигане на различни цели:
…Което е еквивалентно на това
максимална ширина
мин-ширина
максимална височина
мин-височина
Коригиране на грешка с двойни полета
Повечето уеб дизайнери, участващи в разработката на уебсайтове, са добре запознати с проблема с двойните маржове в IE6. Този неприятен бъг се появява, когато присвоите float на всеки елемент (като div ) в една директива и след това приложите полета в същата директива. Например, ако направим това:
..IE6 (обикновено) ще удвои размера на полето до 20px, без причина. Излишно е да казвам, че този бъг с двоен марж съсипа много страхотни дизайни, причинявайки болка и страдание на разработчиците.
За щастие, този бъг е лесен за убиване. Просто променете типа на дисплея на елемента, към който се прилага float от block на inline, както следва:
Това разрешава грешката с двойно поле в 99% от случаите. В случаите, когато това решение не работи, можете да заобиколите този проблем, като премахнете полета и зададете подложка на родителския елемент или директно на елемента, към който е приложен float.
Прочистващ поток
Почистването на потока от плаващи елементи е друга добре позната задача не само в IE6, но и в много съвременни браузъри. В един идеален свят един елемент, съдържащ друг плаващ елемент, би го изолирал напълно от околните елементи. И в реалния свят на мрежатабраузъри, плаващите често не са изолирани. Когато това се случи, обикновено казваме, че плаващият елемент не е "почистен" до своите родителски елементи. Добрата новина е, че има различни, лесни начини за почистване на плаващи елементи в IE6 и други браузъри.
Един от най-старите начини за изчистване на поток от float е използването на хака clearfix. Тази CSS техника работи чрез генериране на съдържание след родителския елемент с помощта на :after CSS псевдокласа. Генерираното съдържание впоследствие изчиства плаващия елемент. Следното е типичен пример:
За да използвате този метод за изчистване на поток, поставете го във вашия CSS файл и заменете всички .clearfix редове със селектора на елемента, който трябва да бъде изчистен от неговите плаващи деца.
Друг CSS метод за почистване на потока е просто да присвоите float на контейнерния елемент. Например, ако присвоявате float на изображение, което е в контейнер div, който не го изолира, просто използвайте следния CSS:
След това, ако съдържащият елемент трябва да се държи като обикновен елемент на ниво блок, приложете към него ширина от 100%, за да освободите място за следващия елемент.
Всичко би било наред, но има по-добър начин за почистване на потока. Просто приложете свойството за преливане към div на контейнера и той автоматично ще се разшири вертикално и ще изчисти float върху дъщерните елементи. Ето един пример:
Задаването на ширина на блок е задължително за Internet Explorer и Opera, но това не означава, че ширината трябва да бъде 100%, можете да използвате всяка ширина и единици, които сметнете за подходящи. Ако не искате да посочите ширина ( width ), можете вместо това да посочите височина ( height ). За свойството препълване може да се използва и всяка от следните стойности:
- auto - показва ленти за превъртане, ако съдържанието надвишава определената ширина
- скрит - никога не показва ленти за превъртане, дори ако съдържанието не се побира в дадените размери
- scroll - винаги показва ленти за превъртане, дори и да не са необходими.
Освен това този метод работи за изчистване на потока от плаващи елементи, има моменти, когато свойството за преливане може да попречи на други аспекти на дизайна. Ако това се случи, можете да опитате да ограничите приложенията за преливане, като използвате overflow-x: hidden или overflow-y: hidden . И не забравяйте, че стойността на ширината на елемент може да бъде заменена със стойност на височина.
Отстраняване на други проблеми с IE6
В края на статията нека да разгледаме няколко други проблема, които са често срещани в IE6. Тези трудности, както и начините за тяхното разрешаване, са доста прости, така че няма да говоря за тях дълго време и ще премина направо към точката.
Относително позициониране
Използването на позиция: роднина на работа е може би най-лесният начин да объркате IE6. Съвременните браузъри нямат проблем с показването на относително разположени вложени елементи, но IE6 често има проблеми с малко по-сложни оформления. За щастие, има доста просто решение - настройка на hasLayout чрез добавяне на zoom:1; всеки относително разположен елемент.
Запомнете, че не трябва да използвате zoom:1; към всички вградени ( inline ) елементи, защото в този случай IE6 ще ги третира като блокови елементи. Не забравяйте за това при следващите решения.
Отрицателни маржове
Отрицателните полета са много полезни в много различни оформления и повечето браузъри се справят с тях без проблем. ДА СЕЗа съжаление IE6 не харесва отрицателните полета, докато не приложите относително позициониране към целевия елемент:
Не забравяйте да присвоите zoom:1 на блока, което е необходимо, защото е относително позициониране.
Преливане при отстраняване на неизправности
Използването на препълване в IE6 понякога може да доведе до неочаквани, необясними проблеми с изобразяването. За щастие, можем да разрешим много проблеми, свързани с препълването, като настроим hasLayout с - познахте - zoom:1. Следва пример:
Другият странен проблем с препълването е свързан със настройката на свойството font-style: italic, което разтяга ширината на родителския елемент. Този проблем се решава чрез прилагане на следния CSS към родителския елемент:
Подреждане на плаващи елементи
Когато плавате елементи с фиксирана ширина, те се разполагат хоризонтално, запълвайки цялата ширина на родителския елемент. Поне така се държат блоковете в повечето браузъри. В IE6 плаващите блокове няма да се подреждат, вместо това ще се подреждат по-скоро като стълба. Добрата новина е, че има две решения на този проблем. Първият е да приложите свойството line-height: 0 към родителския елемент:
Друг начин е да дадете на всеки плаващ елемент, на свой ред, свойството d isplay: inline.
Списъци за отстраняване на неизправности
До:
След:
Накрая
Разбира се, всички програмисти без изключение и много обикновени потребители не харесват Internet Explorer версия 6, но вижте резултатите от гласуването за две седмици:
За съжаление малък брой хора гласуваха, но все пак си струва да помислим дали е толкова силно, искаме да се отървем от товабраузър?