Chyba zobrazení CSS vlastnosti background-image v IE
Chyba zobrazení CSS vlastnosti background-image v IE
Celý minulý týden jsem prováděl redesign jedné webové aplikace a narazil jsem na velice zvláštní
chování Internet Exploreru. Vytvořil jsem tabulku, která byla orámována tenkou čárou tvořenou
obrázkem nastaveným na pozadí krajních buněk. K tomuto účelu jsem využil vlastnost
background-image
CSS třída s takto nastaveným pozadím vypadala takto
.line{
background-image:url("../img/line.png");
background-repeat:repeat-y;
}Tato třída byla nastavena na pozadí oněch krajních buněk. Nyní se dostaneme k problému,
nezřídka se stávalo, že zobrazená tabulka neměla vykreslené ono pozadí tvořené obrázkem.
Představu lze získat náhledem
chybného zobrazení a
správného zobrazení.
Tento velice nepříjemný visuální jev vznikal zcela náhodně. Nejdříve jsem pojal podezření na obrázek ve formátu
png, tato domněnka se ukázala jako lichá. Postupným zkoumáním tohoto problému jsem přišel na další zvláštnost,
pokud se na stránce v místech špatné zobrazení přejelo myší nebo se vybral text pozadí bylo okamžitě
zobrazeno správně. Jinými slovy, pokud se jakkoliv podařilo přinutit prohlížeč danou oblast překreslit, bylo zobrazení již korektní.
Závěr a řešení
Z výše uvedeného tedy vyplývá, že pokud bychom přinutili prohlížeč stránku nebo kontejner
znovu vykreslit bylo by zobrazení pozadí pomoci background-image korektní.
Ja jsem to vyřešil velice jednoduchým hackem, na událost onload jsem spojením
DOM a CSS, nastavil vlastnostdisplay na hodnotu block pro element obalující
tabulku s tímto pozadím, tím jsem přinutil prohlížeč znovu překreslit danou oblast a korektně zobrazit
inkriminované pozadí.
Kód je velice jednoduchý a vypadá takto
document.getElementById('nadrazeny-kontejenr').style.display='block'Související články
Související epizody CZ Podcastu
- #217 · Ivo Lukačovič
O Windy, JavaScriptu a budování firem.
- #3 · Java 6 SE, Vývoj webových aplikací
Dagi a Filemon o novinkách v Javě 6 a webových frameworcích.