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

Část v html souboru pro náhrání css.
<!--[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

Přidat komentář

Zadejte cislo 8*

* Povinné údaje

Povolné formátování text:
**b**tučně**b** » tučně
**link**adresa.cz » http://adresa.cz


xhtml valid   RSS    mapa stránek    by fallvonder 2005 - 2014