Pokud umístíte obrázek do DIVu za tím účelem, aby se DIV velikostí přizpůsobil obrázku (a umožnil např. zadání více borderů, nebo absolutní pozicování přes obrázek), někdy se setkáte s tím, že DIV má dole malý okraj, který přesně nesedí na obrázku. Navíc se tento okraj nedá najít v debuggeru, protože nejde o padding ani margin.
<div class="imgWrapper">
<!-- autosize DIV around IMG -->
<img src="..." />
</div>
Internet Explorer 9, který je stále rozšířený na počítačích s Windows XP a neaktualizovaných Vista a Windows 7, obsahuje jednu nepěknou chybu, která může uživatelům vašich stránek zabránit ji správně používat.
Chyba spočívá v tom, že odkaz, který je absolutně pozicovaný, nedostane správně nastavenu hodnotu z-index a v důsledku toho bude skrytý za ostatními prvky:
.linkContainer { width: 100px; height: 50px }
.linkContainer > * {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
z-index: 10;
}
/* display link above everything else */
.linkContainer > a { z-index: 11; }
V tomto případě bude mít v IE9 odkaz skutečný z-index = 1, takže jakýkoliv jiný prvek v kontejneru znemožní kliknout na něj.
Oprava je celkem jednoduchá – pokud do odkazu přidáte nějaký obrázek na pozadí, donutíte IE9 trochu více přemýšlet o tom, jak odkaz zobrazit a správně mu nastaví požadovaný z-index.
/* display link above everything else */
.linkContainer > a {
z-index: 11;
background: url('link.png') transparent;
}
Tento trik funguje i s prázným nebo dokonce neexistujícím obrázkem:
/* display link above everything else */
.linkContainer > a {
z-index: 11;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) transparent;
/* 1x1px průhledný GIF */
}
nebo
/* display link above everything else */
.linkContainer > a {
z-index: 11;
background: url(#) transparent;
/* # odkazuje na vlastní HTML stránku,
což není validní obrázek a proto
se v pozadí nic nezobrazí */
}
Pokud nemůže řešit opravu pro konkrétní odkazy, stačí na začátek prvního CSS souboru (nebo na začátek HTML stránky) přidat obecnou definici:
a { background: url(#); /* Fix IE9 anchor */ }
Pokud bude tato definice skutečně na začátku, opraví automaticky všechny (potencionálně rozbité) odkazy a zároveň umožní ostatním CSS definicím definovat vlastní barvy a pozadí specifickým odkazům.
V některých případech se může zdát, že z-index v IE9 nejde nastavit některým (dalším) prvkům.
To je pravděpodobně způsobeno tím, že se pokoušíte umístit prvek absolutně přes nějaký z uživatelského pohledu důležitý prvek. V takovém případě IE9 zabrání znepřístupnění tohoto prvku tím, že zruší z-index prvkům, které by ho překrývali.
Za uživatelsky důležité jsou považovány formulářové prvky (input, select, atd.), videa, Java objekty a podobné prvky, které nativně reagují na kliknutí a jiné události myši.