За Explorer с любов

от IvanK

Вечанта битка между силите на доброто и 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 никога не е скучно :)

Коментари:7

  1. Спасяваш ми живота братле! ;)

  2. True… True…

  3. Ако на даден елемент е зададен размер, например ширина, IE включва hasLayout и тогава няма нужда от други фокуси, за да си изчисти float-овете. Това ще спести излишни хакове.

    Обобщение на различните методи за чистене на float-ове има тук:

    http://www.ejeliot.com/blog/59

  4. Да така е, ама идеята беше да нраправя някакъв супер лесен начин да clear-вам float-овете във случая, когато и височината, и ширината са “auto” (който поне за мен е доста … преобладаващ), който да работи безотказно.

    Според мен, това засега е най-добрият начин.

  5. Използвай “zoom: 1″ в цялата му нестандартна прелест като hasLayout trigger на container елемента и няма да ти се налага да override-ваш overflow-a или височината.

  6. height: 100%;
    overflow: hidden;

    и си е чист CSS без хакове, поздрави :)
    Върши ми работа в последните 3-4 години безотказно.

  7. [...] статии на които попаднах с решения. 1.Simple Clearing of Floats 2.За Explorer с любов 3.How To Clear Floats Without Structural [...]

Коментирай