Home arrow Tutorials arrow Uklanjanje bug-a u Internet Exploreru - skriveni, nestali tekst i duple margine

Web Development

Welcome to Web Development section. Please choose a category. 
 
  • Hrvatski tutorijali
    Ovdje su objavljeni razni tutorijali na hrvatskom jeziku na temu PC, programiranje, web development, savjeti, trikovi, optreba racunala itd.
  • Tips / Tricks
    Articles about various tips and tricks concerning Windows, Linux and other OS usage.
  • JavaScripts
    Code snippets, tutorials and tricks for JavaScrip language.
  • PHP & MySQL
    Tutorials, code examples, tips and tricks for PHP and MySQL development.
  • Tutorials
    Place for tutorials about using various application in best and simplest way.
Uklanjanje bug-a u Internet Exploreru - skriveni, nestali tekst i duple margine PDF Print E-mail
(1 vote)


U Internet Explorer postoji poprilično ružan bug koji je mnogim webmasterima zadao glavobolje. Naime, pri renderiranju html-a IE pogrešno izračuna visinu (height) lebdećih objekata, što može rezultirati time da cijeli objekt misteriozno nestane. Često se objekt iznenada prikaže ako scrollate sadržaj ili selektirate dio okolo objekta ili sam objekt. Ako ste došli na ovu stranicu tražeći rješenje ili uzrok misterioznog buga u IE zbog kojeg ste psovali zadnjih sat vremena... nasmiješite se jer lijek postoji.

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.

Primjer misterioznosg nestanka tekst u IE 6 i 7.


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 Cool

 
< Prev   Next >
What's your favorite Internet browser?
 

Login






Lost Password?

Tools

Coming soon...

Syndicate