Всеки „html строител“ се е сблъсквал с проблемите създавани от IE при интерпретирането на кода. Най-често това са размествания на изображения, контейнери и тн.

В тази статия ще изброя 3 най-често срещани „бъга“, и лесният им начин за отстраняване.

1. Центриране на елемент:

Доста често се случва някой елемент от общата картинка да трябва да се центрира. Най-лесният вариант за това, е да се използва margin: auto;. За съжаление IE 6 въобще не го интерпретира.

Да вземем например следния код:

#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
}

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px auto;
}

От него очаквате да видите:

Но вместо това се визуализира така:

Прост начин за отстраняване на бъга, е като добавите text-align: center; на родителския елемент (element-a) и text-align: left; на елемента, който трябва да бъде центриран. Ето как би изглеждал по-горният пример:

#container{
border: solid 1px #000;
background: #777;
width: 400px;
height: 160px;
margin: 30px 0 0 30px;
text-align: center;
}

#element{
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 100px;
margin: 30px 0;
text-align: left;
}

2. Ефекта на стъпалата:

Използването на list елементи в навигацията е похват използван от почти всички разработчици. Правите контейнер, след това вътре поставяте няколко линка и накрая един float в желаната посока.

Ето примера, който ще използваме:

ul {
list-style: none;
}

ul li a {
display: block;
width: 130px;
height: 30px;
text-align: center;
color: #fff;
float: left;
background: #95CFEF;
border: solid 1px #36F;
margin: 30px 5px;
}

А всъщност виждаме това под IE6:

Начин за справяне с този бъг е да float-нем самия list елемент, вместо anchor елементите:
ul li {
float: left;
}

Втори вариант за решение на същия проблем е да добавим display: inline на ограждащия li елемент:

ul li {
display: inline
}

3. Двоен margin на float-те елементи.

Най-често се получава при елементи, които са float-нати и им добавяме margin за да ги отделим от съдържащия ги див.

#element{
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px 0 0 30px;
border: solid 1px #36F;
}

Очакванията са, че този код ще даде следния резултат:

Но всъщност под IE 6 резултата повече наподобява това:

Решението на този проблем се свежда до добавяне на display: inline стойност на float-тия елемент.

Ето как би изглеждал примера от по-горе:

#element{
background: #95CFEF;
width: 300px;
height: 100px;
float: left;
margin: 30px 0 0 30px;
border: solid 1px #36F;
display: inline;
}

Надявам се тези 3 кратки и лесни за изпълнение съвета да са ви от полза в бъдещите проекти. 🙂