За Explorer с любов

Вечанта битка между силите на доброто и Internet Explorer 6 е добре позната на всички нас, води се от незапомнени времена, а археолозите вече са отрикли надгромни камъни на разработчици, паднали в тази кръвопролитна война, датиращи 3000 години преди новата ера!

Но сега няма да говоря за това колко зъл и недостоен враг е този browser, а по-скоро ще документирам една малка победа…

За тези от вас, които не са си направили домашното, набързо да кажа някои неща, които (поне за мен) са отдавна известни:

• Макар и да не е по стандарта, IE6 (и само IE6) разпознава декларации за стиловете от рода на _height, _width, _background-color и т.н.(забележете подчертавката отпред), като това позволява да пишем стилове “само за IE6” наред с норамлните стилове(IE6-то просто маха подчертавката и го приема за нормален стил). Разбира се, така css-а няма да се валидира, но това е перфектно по време на разработка – после всичко се изнася в link tag-ове, оградени в <!--[if IE 6]><![endif]–> и всички са довлни
• IE6 не знае как да се зачисти float-а правилно. В останалите браузъри се използва “overflow:hidden”, за да обгърне float-натите елементи (от изпаднали елементи да станат вътрешни), Разбира се IE6 не е съгласен с нас по въпроса, и за да го вразумим се използва декларацията (_height:1%), която активира един друг бъг на IE, според който, ако съдържанието излиза извън съответния елемент, то той се увеличава, за да обгрърне цялото съдържание (няма да задълбавам сега, ако ти е интересно виж clearing floats). Та както и да е, за прости хора като мене да приемем, че overflow:hidden = _height:1% за IE

И така, да кажем, че горните две твърдения са ни известни, тогава с този код:

1
2
3
4

#container{
  overflow:hidden;
  _height:1%;
}

От това:

може да направим това:

при това доста лесно и бързо, и работещо във всички браузъри.

Да, обаче, тези от вас с повече стари белези и рани, ще кажат, че това гърми драматично, когато се увеличи височината на страницата. Проблемът идва от това, че _height:1% задава 1% от нещо, и ако това “нещо” се окаже достатъчно голямо, 1% вече не е по-малко от съдържанието на елемента, и всичко се проваля. “Еми защо не задам _height:1px вместо това”, беше първата ми мисъл, но се оказва че 1px вече не активира гореспоменатия бъг, и като резултат получаваме елементи, които са си наистина с 1px височина, което е … не особено елегантно. К’во да правим сега?

С малко проби и грешки, се оказа, че има лесно решение – явно overflow:hidden по някакъв странен начин оправя IE6 бъга само за фиксираните височини, следователно, ако IE6 не вижда тази декларация, всичко ще работи – и наистина:

1
2
3
4
5

#container{
  overflow:hidden;
  _overflow:visible;
  _height:1px;
}

Върши перфектна работа.

Ако обаче трябва наистина да изчистите излизащо съдържание (главната задача на overflow:hidden), и едноверменно с това да изчистите float-овете, ще трябва да си останете с _height:1%, и да стискате палци че страницата няма да стане прекалено висока, или да се върнете към добрия стар <div style="clear:both"></div> накрая на елемента…

P.S.

С Internet Explorer никога не е скучно