3 често срещани бъга в IE и как да ги отстраним

 In Архив, Дизайн и код
IE 6 размествания

IE 6 размествания

Всеки “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;
}

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

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

2_IE6bug

Прост начин за отстраняване на бъга, е като добавите 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 в желаната посока.

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

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;
}

3_IE6bug

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

4_IE6bug

Начин за справяне с този бъг е да 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;
}

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

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

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

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

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

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


Recommended Posts
Showing 4 comments
  • GAngelov

    Ммм за последния проблем можеше да се спомене че става само при margin-left 🙂

  • Сашо

    Много слаба статия.
    1 – проблема при най-новите стандарти не съществува (т.е. xhtml)
    2 – това не е бъг под ИЕ, а повече неточност в останалите браузъри
    3 – GAngelov е казал

  • Мартин

    Първия проблем не е само при шестицата, получава се и при IE8
    Решението е 🙂

  • Мартин

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

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search