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

Всеки „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 кратки и лесни за изпълнение съвета да са ви от полза в бъдещите проекти.

бутон за сайт

Подобни статии

• Край на обикновенните диалогови прозорци, променете ги с Dialogs.JS
• Хубав JQuery слайдер.

4 коментара

• 
  GAngelov 21.12.2009 в 18:35

  Ммм за последния проблем можеше да се спомене че става само при margin-left
• 
  Сашо 02.02.2010 в 12:00

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

  Първия проблем не е само при шестицата, получава се и при IE8
  Решението е
• 
  Мартин 12.06.2010 в 18:08

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