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.

Ani tohle nepomohlo?

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.