Testování podpory vlastností display: list-item a list-style-type: decimal


(zaměřeno na podporu v IE6, IE7, IE8, Firefox 3, Opera 9 a Safari 3)

Klasifikační vlastnost display nastavuje či předefinovává druh elementu a způsob jeho zobrazení. Tato vlastnost přistupuje k tvorbě CSS stylů trochu odlišným způsobem, místo přiřazení konkrétní vlastnosti totiž třídí elementy do předem specifikovaných kategorií, hlavní využití se nabízí především při tvorbě vlastních elementů např. v jazyce XML.
Hodnota block vloží za prvek odřádkování, hodnota inline odřádkování zruší, hodnota none prvek dokonce vůbec nezobrazí a hodnota list-item by měla přidat na začátek prvku symbol odrážky (podobně jako HTML element <ul>). Toto funguje ve všech testovaných prohlížečích celkem dobře, pouze v Internet Exploreru a Safari je symbol odrážky úplně (v ostatních prohlížečích částečně) schován za levým okrajem stránky, zobrazí se až tehdy, když nastavíme u prvku s odrážkou levý okraj na minimálně 20px.

<span style="display: list-item">Nápis s odrážkou bez levého okraje</span>

Nápis s odrážkou bez levého okraje (odrážka není v Exploreru a Safari vidět vůbec, v ostatních prohlížečích částečně)

<span style="display: list-item; margin-left:20px">Nápis s odrážkou s nastaveným levým okrajem</span>

Nápis s odrážkou s nastaveným levým okrajem

Pokud ale k předchozí deklaraci přidáme vlastnost list-style-type: decimal, aby se zobrazil seznam číslovaný, je v každém prohlížeči zobrazení odlišné - správné je v Opeře, Safari a Exploreru 8 (počítají se již předchozí dvě položky, takže se zobrazí číslo 3), ve Firefoxu je nelogicky zobrazena 0 a v Exploreru 7 dokonce číslo 33 (počítá se nesmyslně každý řádek předchozího textu)!

<span style="display: list-item; margin-left:30px; list-style-type: decimal">Nápis s číslem</span>

Nápis s číslem

Podobně to je i např. s hodnotou lower-alpha (měla by zobrazit číslování a, b, c, atd.), v Opeře, Safari a Exploreru 8 je správně d, ve Firefoxu opět 0 a v Exploreru 7 už dokonce nestačila abeceda, 43. řádek se zobrazil jako ar.

<span style="display: list-item; margin-left:30px; list-style-type: lower-alpha">Nápis s písmenem</span>

Nápis s písmenem


pepe © 2007