IE, Sliding Doors i znikające elementy

nrafal @ sierpień 23, 2007

Kategoria: HTML,CSS,Webdesign

Kilka dni temu musiałem zastosować w projekcie sztuczkę Sliding Doors. Oczywiście, w Firefoksie wszystko wyglądało cudownie. Zdziwiłem się strasznie, gdy pod IE nagle się okazało, że wszystko renderuje się źle, zwłaszcza, po najechaniu na link. Kod był bardzo prosty, coś w rodzaju:

<h2><a href="">Tekst linku</a></h2>

Style:

h2 {background: url('obrazek_lewy.png') no-repeat bottom left; padding-left: 40px;}
a {background: url('obrazek_prawy.png') no-repeat bottom right; padding-right: 40px;}


i do tego jakieś proste formatowanie tekstu. Wydawało by się więc, że wszystko ok, a jednak nie.

Męcząc się z tym nie mogłem dojść do tego, co się dzieje. Czytałem kiedyś artykuł Riddle’a na temat hasLayout, więc uznałem, że ostatnią deską ratunku jest nadanie elementowi h2 dziwnego wymysłu MS:

zoom: 1;

Wyobraźcie sobie moje zdziwienie, kiedy to zadziałało ;)

Dziś natomiast trafiłem na artykuł, który wyjaśnił wszystko, a przynajmniej wiele. Problem tkwi w kolejności renderowania elementów które mają layout i tych, które go nie mają. W moim przykładzie problem tkwił w elemencie div, położonym znacznie wyżej w hierarchii, który miał zaaplikowane min-height oraz width, co nadawało mu layout.

Dwa przykłady, które udało mi się odtworzyć: przykład 1, w którym po prawej stronie nie ma zaokrąglonego roku pod IE oraz przykład 2, który różni się tylko nadaniem elementowi h2 właściwości zoom i już - działa pod IE.

Ten przykład jest dosyć delikatny - jeśli elementy są zagnieżdżone jeszcze bardziej, może to sprawić, że zostaną całkowicie ukryte. Mogą się dziać jeszcze ciekawsze rzeczy, zwłaszcza, jeśli dzieci elementu bez hasLayout mają zaaplikowany float, o czym można poczytać na satzansatz.de.