Na obranu IE6

Málo věcí je ve webdesignu tak jednoznačných jako image Microsoft Internet Exploreru verze 6 mezi vývojáři. Lze to považovat za kolorit, asi jako nadávky na politiku před volbami. Dvě obvyklá trvzení vývojářů mě ovšem nutí stavět se do opozice ustáleného názoru:

1. „IE6 je tak málo rozšířený, že jej mohu již nyní směle ignorovat.”
2. „Ladění webů pro IE6 vyžaduje nadlidské množství nepříjemné práce.”

Obávám se totiž, že jsou často produktem lidské liknavosti, která našla obhajobu ve většinově přijímaném názoru. Takže brousím modré „é”, sundávám brýle a vyrážím na pomoc drahému staříkovi…

V článku uvažujeme v intencích HTML/CSS vrstvy prezentačních webů, v případě aplikací a Javascriptu bude situace jiná.

Vertikální centrování víceřádkového obsahu v inline prvku

Je to jeden z častých úkolů v CSS, který vypadá v prohlížeči jednoduše…

…a v HTML taky:

<a href="http://www.example.com">
 <span>Víceřádkový obsah ve &lt;span&gt;u vnořeném v&nbsp;&lt;a&gt;</span>
</a>

Jenže jednoduchý vůbec není. Alespoň ne, pokud uvažujeme o podpoře MSIE ve verzích starších než 8.

K centrování jednořádkového obsahu se ujal hack s nastavením line-height na stejnou hodnotu jako je výška rodičovského prvku.

Jenže sdělení „prvek má jednořádkový obsah” je na webu asi stejně pravdivé jako „náš web se ve všech prohlížečích zobrazuje stejně”. Můžete to tvrdit, ale musíte očekávat, že v nějaké situaci to nebude pravda.

Proto se mi líbí poměrně hezké řešení Rogera Keayse. Ony to jsou rovnou řešení dvě. Pro standardní prohlížeče (včetně IE8 ve standardním módu) …

a {
  display: table;
  text-align: center;
  width: 300px;
  height: 300px;
} 

a span {
  display: table-cell;
  vertical-align: middle;
}

… a pro IE7 a IE6:

a {
  display: block;
  position: relative;
} 

a span {
  display: block;
  position: absolute;
  text-align: center;
  left: 0px;
  width: 100%;
  cursor: pointer;
  top: expression(this.parentElement.clientHeight / 2 - this.clientHeight / 2);
}

Nezapomeňte CSS pro starší Internet Explorery izolovat do zvláštních stylopisů oddělených nalinkovaných v dokumentu pomocí podmíněných komentářů.

Bug pro dnešní den: chybná implementace z-index v IE6

Projevuje se tak, že prvek s nižším z-indexem překrývá prvek s vyšším z-indexem.

Stane se ve chvíli, když prvek s vyšším z-indexem má rodiče s relativní pozicí. (position: relative).

Je kruté, že jediným řešením pravděpodobně je vyhnout se v takovém případě relativnímu pozicování rodičovského prvku.

Podrobně to vysvětlují na blogu Two’s-Complement.