Z Problem

Opis problema: Pri pregledu stranice misteriozno nestaje tekst, odredjeni layeri itd. Često pri prelazu miša preko objekta ili već pri učitavanju stranice. Takodjer je uobičajeni efekt iznenadne pojave teksta nakon što "zacrnite", obilježite, selektirate tekst.

Ne postoji generalno rješenje ovog problema, stoga morate testirati vaše stranice u Internet Exploreru i uvjeriti se da vas je "zaobišao" ovaj bug. Ukoliko primjetite misteriozno skriveni tekst postoji rješenje. U tom slučaju objektu koji "sadrži" taj tekst pridružite odredjeni CSS class.

Primjeri

Slijedi screenshot sa primjerom kako to izgleda u browseru. Primjetite kako na mjestu upitnika nedostaje tekst koji se u primjeru ispod normalno prikazuje. HTML i CSS kod je identičan u oba primjera. Ukoliko zacrnite (selektirate) mjesto gdje je upitnik pojavit će se tekst. U protivnom je nevidljiv i umjesto njega zjapi prazan prostor. Na slici stoje dva prikaza; prvi u IE6, te neposredno ispod primjer iz Mozilla Firefox.

Razlog

Naime, spomenuti bug je "double margin bug" u Internet Exploreru. Bug se javlja zbog pogrešne kalkulacije dimenzija lebdećih objekata. Neću se previše zadržati na samom uzroku buga, već prijeđimo na soluciju.

Solucija

Problem je rješen ako odredjenom lebdećem objektu pridružite CSS class (u ovom primjeru IEbug) te na taj način zaobiđete bug u Internet Explorer rendering enginu.

CSS deklaracija izgleda ovako:

    .IEbug { height: 0.01%; }

Naime ovo CSS pravilo definira veoma malu visinu lebdećem objektu, prisiljavajući IE da koristi tkz "layout mode". Više o tome potražite na microsoft-ovim stranicama. Razlog zašto tekst nestaje je taj što IE sprema veličine lebdećih elemenata nepravilno, te upravo zbog postavljanja veoma male visine objekta silimo IE da ponovno prekalkulira dimenzije objekta prije nego što ga grafički prikaže.

Kako koristiti?

Preporučam da ovaj CSS kod koristite samo za IE preglednik. U protivnom bi se mogao umiješati u pravilni rad ostalih browsera te upravo tada prikazati tekst pogrešno. Zato predlažem da kreirate zasebnu CSS datoteku i učitavate samo ako posjetitelj koristi IE. Detekciju možete vršiti putem server-side aplikacije (php, asp) koristeći podatke koje šalje preglednik serveru, ili jednostavnije dodati pravilo u header html dokumenta koristeći slijedeći html kod.

Primjer za Internet Explorer 6

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="CSS_IE6_DATOTEKA" />
<![endif]-->

primjer za Internet Explorer 7

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="CSS_IE7_DATOTEKA" />
<![endif]-->

 Primjetite kako CSS_IE7_DATOTEKA treba zamijeniti za URL-om prema CSS datoteci za specifičnu verziju IE. U ovim primjerima svi ostali browseri će ignorirati navedeni kod.

Primjeri unutar HTML-a

    <div class="izornik">     
      <div class="unos IEbug">
        neki tekst
      </div>
    </div>

Poanta u primjeru je da div objektu pridružimo class IEbug. Primjetite kako je moguće više classova pridružiti određenom objektu (u primjeru je pridružen classu unos).

Zaključak

Kao što vidite ovo je poprilično nasty bug ako ne znate od kuda početi s debugom. Vjerujem da su mnogi satima psovali dok nisu uspijeli rješiti bug. Nadam se da sam ovim tutorialom barem nekome uspio uvesiliti koju sekundu