hr, css a prohlížeče
Element vodorovné čary (hr
) se sice již moc nepoužívá, ale pokud přece jen někdo potřebuje vodorovnou čáru na oddělení obsahu nastylovat, menší přehled jak jsou aplikovány pravidla CSS se hodí.
Ukázka
Trochu netradičně nastylovaný hr. Ve výsledku by měl mít stejné rozměry jako kontrolní div 105 na 105 px. Ukázka v html.
hr{ text-align: left; width: 45px; height: 45px; padding: 20px; margin: 0 auto 0 0; border: 10px solid #555; color: green; background: Grey; }
Výsledek v testovaných prohlížečích (FireFox 2, IE 7, Opera 9, Safari 3).
Celkový přehled
Přehled prohlížečů a CSS vlastností jedné tabulce.
Fire Fox | IE | Opera | Safari | |
---|---|---|---|---|
Barva | background-color | color | background-color | background-color |
Celková výška | vetší z height nebo padding + border-width | height | height + padding + border-width | height + padding + border-width |
Padding | ano (!výpočet výšky) | ne | ano | ano |
Margin | ano | ano (+7px top/bottom margin) | ano | ano |
Zarovnání | střed (změna přes margin) | podle text-align | střed (změna přes text-align) | střed (změna přes margin) |
Firefox (1.5.0.10, 2.0.0.12, 3b4)
Ve Firefoxu nejvíce překvapí výpočet celkové výšky - ta je rovna vyšší z součtu padding
+ border-width
nebo height
.
U ukázky je větší padding
+ border-width
[(20 + 10)*2= 60px] než height
[45px] - height
se nepoužije, pokud je tomu naopak celková výška je rovna height
(jako u IE).
Stejný princip funguje i pro celkovou šířku, nastavení obou rozměrů je nezávislé.
Barva se nastaví přes background-color
- lze použít obrázek (vnitřek je tedy 'prázdný').
Margin
, border
, padding
fungují (kromě výše zmíněného počítání výšky).
Hr
je automaticky zarovnán na střed, pro zarovnání na levo/pravo lze použít margin
(viz ukázka pro zarovnání na levo)
Opera (9)
Celková výška je dána součtem height
+ padding
+ border-width
(stejně jako W3 box model). Šířka je počítána stejným způsobem.
Barva se řídí background-color
(stejně jako u FF obrázek na pozadí funguje).
Padding
, border
fungují.
Margin
nejde samostatně použít na zarovnání levo/pravo (odsazení funguje). Opera k zarovnání používá text-align
- oproti IE je ale nutné vlastnost dát přímo hr
(nezdědí ji od rodiče).
Zajímavé je pokud nejsou text-align
a margin
nastaveny na 'shodné' zarovnání (nalevo - left
- margin: 0 auto 0 0;
napravo - right
- margin: 0 0 0 auto;
střed - center
- margin: 0 auto 0 auto;
namísto 0 mohou být číselné hodnoty) je výsledkem zarovnání na střed, kromě případu text-align: left; margin: 0 0 0 auto;
kdy se hr zarovná napravo.
Safari (3.0.4)
Barva i celková výška je stejná jako u Opery.
Padding
, border
a margin
fungují. Zarovnání levo/pravo je pomocí vlastnosti margin
(jako FF).
Internet Explorer (6, 7)
Celková výška se řídí jen podle height
(width
pro šířku) padding
ani border-width
se nezapočítávají.
Na rozdíl od FF, Opery, Safari se barva nastavuje přes color
(tedy celý vnitřek je vyplněn). Z tohoto důvodu je použití obrázku na pozadí obtížné - pokud je nastaven obrázek na pozadí a color: none;
je sice obrázek na pozadí vidět, ale vykreslí se vnitřní 1px ohraníčení.
Padding
- nefunguje, nastavení border
funguje.
Margin
v IE provází velká nepříjemnost v podobě o 7px většího horního a spodního odsazení (margin-top: 0;
odpovídá margin-top: 7px;
), řešením je použití některého CSS hacku a nastavení požadované hodnoty o 7px nižší.
Horizontální odsazení zvětšením netrpí a chová se správně.
Zarovnává se pomocí text-align
(přímo nastavené nebo zděděné). Zarovnání není ovlivněno margin
.
Stejně vypadající hr
Na závěr příklad stylu který by měl zajistit stejně vypadající čáru v testovaných prohlížečích.
Ukázka a jak by to mělo vypadat (IE6 je díky xml deklaraci přepnuté do quirk modu, takže kontrolní divy budou mít špatnou výšku, hr bude zobrazena správně).
Aby se obešel problém výpočtu výšky u FF jsou width
a height
nastaveny na 0, a požadovanou výšku dostaneme z padding
.
hr{ text-align: left; width: 0px; height: 0px; padding: 5px 145px; margin: 0 auto 0 0; border: 5px solid #555; color: silver; background: silver; }
Pro nastavení velikosti v IE je použité podminečný komentář a další css nastavující width height a opravující margin-top margin-bottom
<!--[if IE]> <link href="ukazka2-ie.css" rel="stylesheet" type="text/css"> <![endif]-->ukazka2_ie.css
hr{ margin-top: -7px; margin-bottom: -7px; width: 300px; height: 20px; }
Použití dalšího externího stylopisu je výhodné v omezní CSS hacků, na druhou stranu pokud chcete přestylovat existující hr musí se zasáhnout do html.
Komentaře
dasti (2008.04.21 15:52:41)
wow