Категории
pCloud Premium

Как да оправим 25+ бъга в Internet Explorer 6

Как да оправим 25+ бъга в Internet Explorer 6

Най-добрата стратегия ,за да се преборим с Интернет Експлорър 6: не го поддържаме! Момент. Ok, усещам безпокойството ви. Вие сте уеб дизайнер и ви идва да си откъснете главата, защото трябва да поддържате и Internet Explorer 6, но нека да го кажа тактично, IE6 не поддържа вас. Изразходвали сте много часове, но сайта пак не изглежда както трябва. Мога да ви съчувствам. Мога също и да помогна.

превод: Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
автор: Benjamin

Това не е от тези проповеди за IE6 ,с които да убеждаваме да зарежете този браузър. В интернет има достатъчно, но те не ви помагат ако трябва да поддържате IE6, защото все още има значителен дял от пазара, който не можете да игнорирате в името на бизнеса ви. Не, това тук е информация ,на която се надявахте.

Прерових мрежата за информация и също така добавих някои лични фиксове за IE6 и сега събрах всичко в този наръчник като източник за всички ,които имат вземане даване с Internet Explorer 6. Където е възможно, съм се постарал да предоставя най-чистите и валидни решения за всеки бъг, а не грозни хакове.

Този масивен IE6 пътеводител отне не малко време за да бъде създаден, затова го сложете в bookmark, споделяйте го и го използвайте, за да спестите на вас и вашите колеги безброй часове крещене срещу монитора и блъскане на собствената ви глава в бюрото и други неодушевени предмети. ico

Стратегии

Преди да преминем към по-специфичните бъгове на IE6, важно е първо да прегледаме някой стратегии ,които ще помогнат да ограничим възможно най-много появата на проблеми с този браузър. Предприемането на малко предпазни мерки в началото, по-скоро биха спестили време и пари, вместо да се ангажирате с множесто бъгове, които иначе бихте избегнали.

IE6 и неговият пазарен дял

Според "market Share", настоящият процент (Август 2010) потребители с IE6 е в рамките на 10-20%, но други източници предоставят по-нисък процент. Колкото и да е варираща статистиката, тя сочи към спад в използването му ico Въпреки всичко, единствената статистика, която има значение, е тази за вашия собствен сайт. Ако вече имате средство за проследяване на трафика към сайта ви, запитайте се дали процента на IE6 потребителите си струват услията ви, за да се чувстват добре във вашия уебсайт. От гледна точка на бизнеса: какво е съотношението загуба/печалба спрямо времето и парите, изразходвани за синхронизация на сайта ви. Бихте ли си позволили да поддържате постоянно замиращият IE6?

Ако болшинството от вашите посетители не използват IE6, можете да спестите доста загубено време, пари и усилия, като пренебрегнете IE6.

Обмисляйте дизайна си, клонете към опростена структура

Ако добре обмислите дизайна си, дори да отделите няколко минути за да се спрете на най-добрият подход към кодирането, може да избегнете някои потенциални проблеми. Дори най-сложния визуален дизайн може и трябва да се създаде с прости технически решения. Ако забележите, че използвате прекомерно количество код, може би е добър знак, че трябва да преосмислите подходите си към програмирането.

Докато събирате опит и се справяте с различни лейаут проблеми, следете резултатите си и проблемите, които сте решили. Мога почти да гарантирам, че пак ще попаднете на същите проблеми, тогава един списък с решението им ще ви спести много време.

Използвайте правилна декларация

Ако не използвате правилна (или никаква) декларация, ще възпрепятсва изобразяването на сайта ви еднакво във всички браузъри. Използвайте един от тези doctypes : HTML 4.01 Strict, HTML 4.01 Frameset, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, XHTML 1.0 Transitional, or XHTML 1.1

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


Валидирайте кода си

Слушал съм спорове между хора, че няма смисъл от валидирането на кода, но хич не се връзвам. Валидирането в повечето случаи не е толкова трудно и би трябвало да отнеме няколко минути. Тези минути ,инвестирани във валидация на XHTML и CSS, могат да ви донесат успехи във всички браузъри, не само в IE6.
Валидацията осигурява бъдеща съвместимост с браузърите и намалява нуждата от поддръжка. Единствената причина ,поради която може да пренебрегнете валидирането е, ако искате да се възползвате от CSS3 опциите, които бразузърите поддържат.

Разработвайте първо за браузъри, съвместими със стандартите

Наред с валидирането на кода ви, ще избегнете и много стрес като разработвате сайта си първо за браузъри ,които са съвместими с установените уеб стандарти като Firefox, Opera, Safari и Chrome ,след което можете да преминете към браузъри като IE6 и IE7. Тъй като повечето браузъри ще показват сайта ви малко или много по един и същ начин, бихте могли да използвате специалните тагове, за да поправите разминаванията в Internet Explorer. Използвайки тази последователност на работа, си осигурявате солидна основа за в бъдеще, когато ще можете да премахнете поправките за браузърите ,които вече не се поддържат.

Използвайте "Progressive Enhancement"

"Progressive enhancement" означава просто да бъдете сигурни, че основната функционалност е достъпна за всички потребители, преди да преминете към "полирането" на сайта ви. Опитайте се да направите така, че вашите уеб апликации да работят без Javascript и чак тогава да прибавите Javascript за анимациите, Ajax ефекти и т.н., но когато говорим за Internet Explorer 6, принципа важи и за ползването на CSS3 (дори някои стойности на CSS2), HTML5 и други уеб протоколи, които IE6 не поддържа. В някои случай може да се окаже невъзможно да предоставите еднакво сърфиране в сайта ви на всички потребители във всички браузъри, особено на тези в Internet Explorer 6. Използвайки стратегията "progressive enhancement" ще сте сигурни, че тези потребители ще имат възможно най-много функции които сайта ви предоставя.

Пречистващи правила в CSS

Всеки браузър има свой собствен "stylesheet" (css) и за никой не е учудващо, че всеки един е различен. Едно "пречистващо" правило в началото на вашият css ще улесни работата ви ,когато разработвате за всички браузъри. Има много такива правила в интернет, простиращи се от по-прости до по-детайлни.

По-прост пример:
1. body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}

Популярни CSS Resets:
YUI CSS Reset
Eric Meyer's Reset Reloaded

Използвайте Javascript библиотека

Ако по-голямата част от уеб сайта ви се презентира от javascript, обмислете използването на javascript билиотека. Повечето библиотеки са тествани в множесто браузъри, включително IE6, и автоматично ще се справят с много (дори всички) проблеми с ползваният от вас javascript код в различните браузъри. Има няколко различни javascript библиотеки ,от които да избирате. Като цяло, всичко което може да се направи в едната, може да се направи и в другите, затова изберете библиотека, която пасва на личния ви подход към писането на javascript код.

Това е лист с най-популярните библиотеки:
* MooTools
* jQuery
* ProtoType with Scriptaculous
* Dojo
* Ext JS

Със сигурност има още много други библиотеки, но изброяването им ще оставя за някой друг ден. От изброените обичам, използвам и горещо препоръчвам MooTools, особено ако се ориентирате добре в джаваскрипт. Ако тепърва започвате, jQuery вероятно би било следващото ми предложение.

Използвайте Javascript IE "поправящ" скрипт (Fix Script)

Има няколко Javascript решения, носещи се в Интернет, които принуждават Internet Explorer да се държи като съвместим със стандартите браузър. Ако групата посетители които ползват IE с включена Javascript поддръжка, може да използвате "Dean Edwards' IE7" или подобен скрипт.

Как да дебъгваме в Internet Explorer

Internet Explorer може да бъде пословично труден за дебъгване, но има няколко инструменти, които да улеснят разработчиците. Както споменахме по-горе, първо разработвайте за браузъри ,съвместими с установените уеб стандарти. Firebug и Web Developer Toolbar са две чудесни приставки за Firefox и биха ви помогнали да откриете, предотвратите и поправите много бъгове в IE. Ако искате да ползвате силата на Firebug в други браузъри, "Firebug Lite" е добре дошла за вас.

Ако искате да тествате с различни версии на Internet Explorer, двата най-добри избора ,освен инсталирането на виртуална машина, са IE Collection и IETester (безплатни). Създателите на IETester също предлагат "DebugBar", безплатен за лично ползване плъгин за IE, но изисква платен лиценс след 60 дни.

Как да изолираме IE6

Първата стъпка в борбата с Internet Explorer 6 е да можете да го излирате така, че всякакви промени да засягат само него, не и другите браузъри. Има няколко начина за да направите това: с условни коментари, с CSS селектори и с Javascript. Ще разгледаме всеки метод поотделно.

Използвайте условни коментари за Internet Explorer

Майкрософт добави условни коментари като начин за дефиниране на различните версии на Интернет Експлорър. В тези коментари можете да сложите всичко, включително Javascript, Javascript файлове, CSS и вътрешни CSS декларации. С тези коментари можете да насочите към коя версия на IE да се изпълнят вашите заявки, към определена версия, всички версии под или над една фиксирана такава.

Синтаксисът е такъв:

  1. <p>Това съобщение ще се появи във всички браузъри.</p>
  2. <!--[if lte IE 6]>
  3. <p>Това съобщение ще се появи във версии на Internet Explorer по-ниски или равни на версия 6.</p>
  4. <![endif]-->
  5. <!--[if gte IE 6]>
  6. <p>Това съобщение ще се появи във версии на Internet Explorer по-високи или равни на версия 6.</p>
  7. <![endif]-->
  8. <!--[if gt IE 6]>
  9. <p>Това съобщение ще се появи във версии на Internet Explorer по-високи от версия 6.</p>
  10. <![endif]-->
  11. <!--[if IE 5.5]>
  12. <p>Това съобщение ще се появи само в Internet Explorer версия 5.5.</p>
  13. <![endif]-->
  14. <!--Примерен ред за да използвате CSS, който да важи за версии по-ниски или равни на версия 6-->
  15. <!--[if lte IE 6]>
  16. <link type="text/css" rel="stylesheet" href="/osfeoweb/css/ie6.css" />
  17. <![endif]-->

Използването на условни CSS-и има няколко преимущества в повече от другите методи. CSS-а е отделен от другите CSS-и така няма объркване кои селектори ще се ползват за определен браузър. Също така, когато използването на IE6 стане почти нулево, CSS-а може да бъде премахнат бързо без да преправяте който и да е било друг файл.

Негативната страна на нещата е,че условните файлове прибавят допълнителна HTTP заявка за страницата към браузъра. Бих казал, че това е напълно приемливо, но не бих препоръчал използването на условни Javascript файлове, защото Javascript файловете действат като блокади и ще попречат зареждането на други файлове, докато Javascript не се е заредил напълно. Ако все пак имате нужда от условни Javascript файлове, използвайте самия Javascript, за да насочвате към определен браузър.

Как да посочим IE6 с CSS селектори

Ако не искате да използвате условни CSS-и, CSS селекторите са друг вариант за таргетиране на IE6. Internet Explorer 6 не поддържа селектори с "наследници" (child selectors). Първо направете CSS декларация за IE6, след което ползвайте child селектори, които да се ползват от IE7 и всички модерни браузъри.

Първо, HTML:

  1. <div>
  2. <p class="header">Примерен текст</p>
  3. </div>

Сега CSS:

  1. /*Този ред е за IE6*/
  2. .content {color:red;}
  3. /*Този ред е за всеки браузър, който използва child селектори*/
  4. div>p .content {color:blue;}

Лошото на този метод е, че може да направи CSS файла ви доста разхвърлян, така че се подсигурете с ясни забележки в коментарите. В този случай, CSS декларацията за IE6 ще бъде засечена и използвана от другите браузъри, затова е важно да се постави child селектора. Причината, поради която child селектора пренаписва първата ви декларация е, че child селектора предоставя по детайлна спецификация на декларацията. Понеже IE6 не разпознава този синтаксис, той го игнорира, но всички други браузъри ще обработят информацията правилно.

Допълнителна информация:
CSS Browser Compatibility Chart
Master Browser Compatibility Chart

Как да използваме Javascript за да засечем IE6

Ако искате да засечете IE6 използвайки Javascript, но не искате да използвате условни коментари, ето как:

  1. //Чист JavaScript, без помощ от библиотека - бележка: трябва да се постави в "onLoad" event- в противен случай ще доведе до грешка в страницата
  2. if(typeof document.body.style.maxHeight === "undefined") {
  3. alert('IE6 Detected');
  4. }
  5. //MooTools синтаксис (за IE7, използвайте trident5)
  6. if (Browser.Engine.trident4) {
  7. alert('IE6 Detected');
  8. }
  9. //jQuery синтаксис
  10. if (($.browser.msie) && ($.browser.version == "6.0")){
  11. alert('IE6 Detected');
  12. }

Допълнителна информация:
Quirksmode's Browser Object
MooTools' Browser Object
jQuery's support utility

Изображения

Internet Explorer 6 има няколко проблема що се отнася до изображенията, проблеми, които могат да доведат вашия уеб сайт до пълна катастрофа. Предназначението на тази секция е да помогне и да намали част от болката ви ico

PNG Алфа прозрачност в IE6

Един от най-обезсърчаващите аспекти на Internet Explorer 6 е, че не поддържа прозрачност за картинки с високо качество. Има няколко javascript решения, които ще изборя, но нито едно от тях не ви позволява да използвате CSS "Sprite" изображения, освен Алфа версиятата на Twin Helix's IE6 PNG Fix.

Най-простото решение е да запазите изобранието като PNG8 в ключена Алфа прозрачност. Ако използвате Adobe Fireworks, може да го направите като изберете от менюто Save As > Save as type > Flattened PNG > Options > Alpha Transparency. Ако изплзвате каквато и да е преливка, може да изберете "Dither checkbox", за да получите малко по-голямо качество в преливката. Запазвайки като PNG8 с Alpha Transparency, картинката ще изобразява полу-прозрачните области като 100% прозрачни; няма вариации в прозрачността.

Друг вариант е да добавите специфичен IE филтър в CSS-a, който да афектира само IE6.


JavaScript PNG Поправки:
MooTools' FixPNG
IE PNG Fix by Twin Helix
TweakPNG
DD_belatedPNG

Заоблени ъгли в IE6

Вместо да навлизам в детайли тук, просто ще ви пренасоча към нашия урок за CSS Менюта Със Заоблени Ъгли (на английски), метод работещ във всички браузъри, за менюта и други лейаут елементи.

Как да се справим с премигващи фонови изображения

Ако използвате CSS sprite за фонови изображения, линкове или бутони, ще забележите, че картинката ще премигва за кратко в Internet Explorer 6. Причината е че IE6 не кешва както трябва изображението и го презарежда всеки път. Това е поправимо с един единствен Javascript ред, който насилва IE6 да кешне картинката.

<script type="text/javascript">document.execCommand("BackgroundImageCache",true);</script>

Визуална структура на сайта

Дизайн бъговете в IE6 биха могли да се окажат най-обезсърчаващи за оправяне, особено когато се стремите към перфектност до пиксел, а уеб сайта изглежда перфектно във всички други браузъри, но не и в IE6. Тази секция ще проследи някои от бъговете и тяхното решение.

Да разучим hasLayout

Някои бъгове в IE6 дължим на Microsoft и тяхната собствена концепция за това как браузъра да интерпретира кода, който сте написали с толкова труд. Обяснено на кратко, hasLayout се задейства, когато за даден елемент са зададени конкретни размери като широчина и височина. Отсъствието на тези декларации довеждат до множеството бъгове, които без съмнение сте срещали при работата си с IE6.

Вместо да се впускам в обширно описание на hasLayout, ще ви прератя към един чудесен урок по темата от John Gallant и Holly bergevin, които ще конкретизират кога и как да се справите с hasLayout.

Повече информация:
"HasLayout" Преглед от Microsoft

IE6 Box Model

Ако "quirks" режима е задйстван в Internet Explorer 6, IE6 ще използва по-старата интерпретация на Microsoft за "box model", която изключва рамки и "padding" в общата ширина на елемента. Най-добрата стратегия, за да се справите с този бъг е, да избягвате "quirks" режима като използвате правилна doctype" декларация или да избягвате използването на стойността "width" за елемент, който вече използва стойности за "border" или "padding". Условни коментари също биха помогнали, но по-добре да бъдат оставени като най-последен вариант.

Допълнителна информация:
IE CSS Tricks That Will Get You Every Time
Internet Explorer And The CSS Box Model
Internet Explorer Box Model Bug

Минимална височина min-height

IE6 игнорира стойността "min-height" и вместо това третира "height" като "min-height". Благодарение на Dustin Diaz, бе открито решение, което използва декларацията !important, която IE6 ще отхвърли, но не и другите браузъри. Това решение работи също и за "min-width".

  1. /*Работи във всички браузъри*/
  2. #container {min-height:200px; height:auto !important; height:200px;}

Друга опция е да използвате CSS селектори, за да постигнете същия резултат по друг начин.

  1. /*За IE6*/
  2. #container {min-height:200px; height:200px;}
  3. /За всички други браузъри*/
  4. html>body #container { height:auto;}

"MAX HEIGHT"

За съжаление, единствения начин да постигнете ефекта "max-height" в IE6 е, чрез използването на IE-специфични CSS изрази, които са еквивалент на Javascript използването в CSS или ползването на самия Javascript. От двете, аз препоръчвам използването на Javascript решението като CSS изрази, но и двете излизат скъпо от гледна точка на обработване и биха довели до сериозни грешки в браузъра. Така или иначе и двата варианта няма да работят, ако поддръжката на javascript е изключена. Напомням, че това решение е само за IE6, тъй като всички други браузъри поддържат "max-height".

  1. //Чист Javascript, сменете размерите и ID-то според вашият случай.
  2. var container = document.getElementById('container');
  3. container.style.height = (container.scrollHeight > 199) ? "200px" : "auto";
  1. //Алтернативна функция. Забележка: за динамично оразмеряване добавете "window resize event"
  2. function setMaxHeight(elementId, height){
  3. var container = document.getElementById(elementId);
  4. container.style.height = (container.scrollHeight > (height - 1)) ? height + "px" : "auto";
  5. }
  6. //Примерно използване
  7. setMaxHeight('container1', 200);
  8. setMaxHeight('container2', 500);

100% Височина (HEIGHT)

За да може даден елемент да постигне 100% height в IE6, трябва да зададете твърда височина (fixed height) на елемента родител (parent element). Ако искате да направите елемента по цялата дължина на страницата ви, задайте "height:100%" на html и body таговете.

  1. /*100% височина на елемента родител в IE6*/
  2. #parent {height:500px;}
  3. #child {height:100%;}
  4. /*100% за страницата в IE6*/
  5. html, body {height:100%;}
  6. #fullLength {height:100%;}

Минимална ширина - Min Width

Както максимална височина и ширина, минималната ширина (min-width) не се поддържа от IE6. Има две решения - добавяне на допълнително маркиране или с Javascript.

  1. //Чист JavaScript, сменете ID-то и размерите според вашия случай.
  2. var container = document.getElementById('container');
  3. container.style.width = (container.clientWidth < width) ? "500px" : "auto";
  4. //Алтернативна функция. Забележка: за динамично оразмеряване, добавете "window resize event"
  5. function setMinWidth(elementId, width){
  6. var container = document.getElementById(elementId);
  7. container.style.width = (container.clientWidth < width) ? width + "px" : "auto";
  8. }
  9. //Примерно използване
  10. setMinWidth('container1', 200);
  11. setMinWidth('container2', 500);

Максимална ширина - Max Width

Единственият начин да използвате max-width в IE6 е, чрез JavaScript

  1. //Чист JavaScript, сменете ID-то и размерите според вашия случай.
  2. var container = document.getElementById(elementId);
  3. container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
  4. //Алтернативна функция. Забележка: за динамично оразмеряване, добавете "window resize event"
  5. function setMaxWidth(elementId, width){
  6. var container = document.getElementById(elementId);
  7. container.style.width = (container.clientWidth > (width - 1)) ? width + "px" : "auto";
  8. }
  9. //Примерно използване
  10. setMaxWidth('container1', 200);
  11. setMaxWidth('container2', 500);

Двоен Margin Float Бъг

Internet Explorer6 некоректно ще удвои "margin"-а за елементи със стойност "float", ще добави отново стойността "margin" в същата посока, в която е зададен "float"-а. Решението е на Steve Clason, чрез добавяне на "display:inline;" за елемента със стойност "float".

  1. /*Причинява упоменатия бъг в IE6*/
  2. .floatedEl {float:left; margin-left:100px;}
  3. /*Решението*/
  4. .floatedEl {float:left; margin-left:100px; display:inline;}

Как да премахваме стойностите "Float"

Ако се опитвате да обвиете (wrap) елементи със стойност "float" в контейнер, но контейнера не обвива правилно, изрично задайте височина или ширина на контейнера със стойности различни от "auto" и добавете "overflow" с някои от следните стойности: auto, hidden или scroll. Alex Walker първи писа за тази техника и дава заслуга и на Paul O'Brien за идеята.

  1. Примерен HTML код
  2. <div id="container">
  3. <div id="floated1"></div>
  4. <div id="floated2"></div>
  5. </div>
  6. Примерен CSS код
  7. #container {border:1px solid #333; overflow:auto; height:100%;}
  8. #floated1 {float:left; height:300px; width:200px; background:#00F;}
  9. #floated2 {float:right; height:400px; width:200px; background:#F0F;}

"Float Drops"

Този бъг се появява, когато съдържанието на "носещият" се (floated) контейнер достигне указаната си ширина. Във Firefox, IE7 и други браузъри, съдържанието просто ще бъде отрязано, но в Internet Exporer 6 контейнера ще игнорира зададените му размери и ще се разшири, за да побере съдържанието. Ако има други елементи със стойност "float" до контейнера, те ще паднат под него.

За този бъг в IE6 няма наистина задоволително решение, поне до колкото аз знам. Може да бъде заобиколен използвайки "overflow:hidden;" или "overflow:scroll;", но стойността "hidden" причинява проблеми с достъпността а стойността "scroll" може да разруши дизайна на сайта. Дори Javascript поправките не изглеждат полезни за смекчаване на проблема. Най-доброто решение, което предлагам е да избягвате самата причина за проблема, като използвате или фиксиран лейаут "fixed layout", или като бъдете екстремно предпазливи отностно големината на вашето съдържание.

The Guillotine Бъг

Този бъг е особено смущаващ в IE6 (и IE7). Когато линкове с различен "hover" стил със съдържание без "float", след "float"-а са посочени с мишка, съдържанието се отрязва в елемент със стойност "float" и без да е изчистен (non-cleared), който е по-голям от контейнера. Доста объркващо. Не се тревожете, този бъг и решението му са добре описани от приятелите в "Position Is Everything". Въпреки сложното представяне на бъга, решението е наистина просто. Добавя се допълнителен елемент в дъното на контейнера със стойност "clear:bothe;". Вторият вариант е да задействате "hasLayout" в елемента съдържащ проблемните линкове. Това се постига като се добави "height:1%;" декларация.

Допълнителна информация:
IE hasLayout и завръщането на the Guillotine bug

1px празнина за абсолютно позиционирани елементи

Тази грешка се появява в IE6 заради грешка при закръглянето. IE6 ще добави еднопикселова празнина в долния десен ъгъл между абсолютно позициониран елемент и горния реалтивно позициониран елемент, ако размерите му са със странно число. Единственото истинско решение е, да специфицирате височината или ширината на горния елемент. За съжаление, няма истинско решение за динамични дизайни. Paul O'brien обяснява проблема по-детайлно тук.

3px празнина Float бъг

Или изместване на текста с 3 пиксела- този бъг се появява в IE6, когато текст е разположен до елемент със стойност "float". IE6 добавя 3 пиксела "margin" между елемента и текста, дори ако никой не е определен. Stu Nichols има елегантно решение на проблема.

IE и z-index стойност

Ако използвате стойността "z-index" за позиционирани елементи в Internet Explorer 6 или 7, той ще бъде счетен с нулева стойност, предизвикващо грешка при изобразяването. Решението е да добавите по-висока "z-index" стойност на горния елемент. В някои случаи, горния елемент ще има нужда от добавяне на "position:relative;"

Повече информация.
Squish The Internet Explorer z-index Bug

Преливане - Overflow Bug

Jonathan Snook документира и оправя този бъг, който се появява, когато стойността "overflow" е зададена за съдържащ елемент, в който има друг релативно-позициониран елемент с по-голяма стойност за височина от съдържащия елемент. В IE6 и IE7, вместо да се спази "overflow" стойността, по-големият вътрешен елемент ще прелее над съдържащият го. Решението? Добавете "position:relative;" към контейнера.

Списъци - Lists

Няма да се учудваме, че има няколко специфични IE бъгове, които засягат списъците. Ето някои от тях, както и решение за тяхното поправяне.

Проблем с ширина на хоризонталните списъци

Ако се опитвате да оформите хоризонтално меню с "float" елементи, и сте задали "float" за "li" елемент ще видите, че всеки елемент дразнещо ще се разпъва на 100% от ширината на съдържащия контейнер, правейки менюто да се подреди вертикално вместо хоризонтално. Отново, този проблем изкача само в IE6. Решението? Благодарение на Rofikul Islam Shahin е лесно. Просто задайте "float:left;" на "a" и "li" елементите, след което менюто би трябвало да се показва така както трябва.

Стъпаловиден Бъг - Staircase Bug

Стъпаловидният бъг се появява, когато съдържанието на "li" елементите е със стойност "float". Тогава или всеки параграф ще се подреди вертикално един под друг, или ще застанат един върху друг, докоснати в краищата, образувайки стъпала от параграфи. Решението? Има две: добавете "float" на "li" или "display:inline;".

Vertical Spacing или Whitespace бъг

Когато създавате вертикален списък (vertical list), който има "li" елементи с блок (block-level) под-елементи, Internet Explorer 6 (а понякога и в IE7) добавя вертикално пространство между лист параграфите. Има няколко решения за това, но нека да отправим бърз поглед към един пример.

  1. Примерен HTML код
  2. <ul>
  3. <li><a href="#">Item 1</a></li>
  4. <li><a href="#">Item 2</a></li>
  5. <li><a href="#">Item 3</a></li>
  6. </ul>
  7. Примерен CSS код
  8. ul {margin:0; padding:0; list-style:none;}
  9. li a {display:block; padding:0.5em; background:#ddd;}

Решенията
Jon Hicks дава решение, намесващо "float" и изчистване на "anchor" таговете в списъка.

  1. ul {margin:0; padding:0; list-style:none;}
  2. li a {display:block; padding:0.5em; background:#ddd; float:left; clear:left;}

Друг вариант е да задействате hasLayout като зададете специфична височина или ширина на "anchor" таговете (или каквито и да е block-level под-елементи.

  1. ul {margin:0; padding:0; list-style:none;}
  2. li a {display:block; padding:0.5em; background:#ddd; width:100%;}
  3. /* height:1%; също работи в този случай */

Елемента "li" може също да приеме "display:inline;" декларация.

  1. li {display:inline;}

Друго интересно решение включва вмъкване на разстояние (space) между последния знак от текста и затварящия таг.

  1. <ul>
  2. <li><a href="#">Item 1 </a></li>
  3. <li><a href="#">Item 2 </a></li>
  4. <li><a href="#">Item 3 </a></li>
  5. </ul>

Допълнителна информация и обяснения
Fixing the IE6 Whitespace Bug
Closing the gap between list items in IE

Поведение/режим на работа - Behavior

Като в много други случаи, IE6 има проблеми с режима си на работа. Някои поведенчески проблеми се появяват в IE6, защото браузъра е стар, защото не поддържа напълно CSS2, защото въобще не поддържа CSS3, или защото Microsoft са решили да се придържат към собствените си стандарти.

Нека погледнем най-често срещаните проблеми в поведението на Internet Explorer 6.

Липсващ "Hover" в IE6

IE6 не поддържа условието hover на нито един елемент, освен "anchor" тагове с "href" атрибут или елементи, за които такива "anchor" тагове играят ролята на контейнер. Това услиено потиска използването на "mouseover" ефекти в IE6, но има начин да заобиколим проблема.

Най-добрият подход е да не разчитате на стойността "hover" при важни функционалности в сайта ви. Вместо това я използвайте, за да акцентирате на един вече достъпен и функциониращ елемент.

Повечето IE6 "hover" поправки ще използват или специфични CSS стойности на Microsoft, или Javascript, обикновенно чрез Javascript библиотека, или IE6 "fix" скрипт.script.

Имплементиране на "Canvas" таг в IE

Нито една версия на Internet Explorer (включително IE7 и IE8) не поддържа HTML5 "canvas" тага, защото Microsoft налагат своя вариант - VML. Въпреки това, има няколко Javascript решения, които симулират "canvas" тага за IE.

Canvas Fixes и ресурси:
ExplorerCanvas (наречен също excanvas)
ExplorerCanvas Google Group
MooCanvas at Github, MooTools имплементация на excanvas

IE6 Преоразмеряване - Resize Bug

Emil Stenstrom откри решение за този бъг. Общо взето, в страница ,в която body елемента е центриран и леиаута е фиксиран, всички елементи с "relative" стойност, ще станат фиксирани, ако страницата е преоразмерена, но не е обновена. Решението на Emil е просто и елегантно: добавете "position:relative;" към body тага.

Javascript

Internet Explorer 6 също страда от безброй грешки при интерпретиране на Javascript. Не бих могъл да ви кажа всеки един бъг, но ще засегна някои от по-често срещаните.

Error: Expected Identifier, String, Or Number

Internet Explorer не е толерантен към слабо оформени javascripts и често ще ви поднася грешката "Error: Expected Identifier, String, Or Number", ако намери изоставаща запетая след последния обект в "array" или "hash". Другите браузъри са склонни да простят грешката, но премахвайки тази запетая, може лесно да се отървете от този error.

IE JavaScript Изтичане на информация - Memory Leaks

Internet Explorer използва собствен "памет мениджър" и може да бъде обект на изтичане на информация, поради неспособност да възстанови памет докато взаимодейства с Javascript. Douglas Crockford има чудесно решение за този случай, не подминавайте и статията на Hedger Wang.

Разни - Miscellaneous

Тази секция е посветена на няколко разнородни бъгове в Internet Explorer 6, които не се вместват в другите категории.

Дублирани знаци - Duplicate Characters Bug

Когато IE6 засече каквито и да е скрити елементи като коментари или елементи с "display:none;", които се намират в елемент със стойност "float", е възможно да дублира съдържанието. Този проблем е детайлно обяснен в "Position Is Everything", но решението изглежда достатъчно просто: приложете "display:inline;" на елемента със стойност "float" (този ,който съдържа скрития елемент).

Favicons в IEFavicons в IE

Favicon е съкращение от Favorites Icon и се отнася към 16 на 16 пикселовата картинка, която се показва до всяка страница, която е във вашият "bookmark". Има два начина за да успеете да я покажете. Първият е просто да запазите изображение с име favicon.ico в основната (root) директория на вашия уеб сайт. Internet Explorer и другите браузъри би трябвало автоматично да потърсят картинката и да я покажат. Вторият метод е да добавите следния код в head-а на вашият HTML документ (след като сте качили картинката в основната директория):

  1. <link rel="shortcut icon" href="/oweb/../favicon.ico" type="image/x-icon" />

Трябва да се отбележи, че favicon картинката подлежи на кешване и може да не се промени докато не изтриете кеша на браузъра ви и обновите страницата няколко пъти. Ако искате картинката да се обновява автоматично за вашите потребители, задайте и "expires header".

Допълнителна информация:
How to Add a Shortcut Icon to a Web Page

GZip в IE6

Някои версии на IE6 преди ъпдейта на XP SP2 би могло да имат проблеми с файлове, които се предоставят чрез GZip компресия. За щастие, Seb Duggan откри решение, използващо ISAPI_Rewrite за Apache. Неговото решение е да поставите този код във файла httpd.conf в инсталационната директория ISAPI_Rewrite:

  1. RewriteEngine on
  2. RewriteCond %{HTTP:User-Agent} MSIE\ [56]
  3. RewriteCond %{HTTP:User-Agent} !SV1
  4. RewriteCond %{REQUEST_URI} \.(css|js)$
  5. RewriteHeader Accept-Encoding: .* $1

Бонус Ресурси - Bonus Resources

Въпреки този дълъг списък с бъгове на Internet Explorer 6, проблемите с IE6 продължават. Ако не успяхте да намерите каквото търсехте, проверете тези допълнителни ресурси.

The Definitive Guide to Taming the IE6 Beast
IE6 Peekaboo Bug
hasLayout.net
CSS For IE6: 6 Common Problems And Fast Ways To Fix Them
Explorer Exposed!
The Death of IE6
10 Fixes for IE6 Problems
http://pmob.co.uk/
IE6 Bug Reports
MSIE6 Bugs
Internet Explorer & CSS issues
IE CSS Bugs That'll Get You Every Time

Надявам се статията да ви е била полезна ico

22 Март 2012г.
Прегледано 5681 пъти