Brugere lige nu: 1
Hop længere ned på siden, til:
Siden er opdateret 23. 1. 2009
<hr /> kan - som andre elementer - styles med css. Dette kan ske med inline-css, ved at tildele generel definition for <hr /> i et stylesheet eller ved at tildele en id eller class, som så defineres i stylesheet.
1: hr standard (fuld bredde).
<hr />
Mozilla, FireFox, Opera og IE laver denne linje ens 2px høj.
Netscape laver linjen 3px høj med hvid midte.
2: hr med bredde på 50%.
<hr style="width:50%" />
Mozilla, FireFox, Opera og IE laver denne linje ens centreret, 50% bred og 2px høj.
Netscape laver linjen centreret, 50% bred og 3px høj med hvid midte.
3: hr 50% bred, 50% højre-margen.
<hr style="width:50%;margin-right:50%" />
Mozilla, FireFox og Opera laver denne linje venstrestillet, 50% bred og 2px høj.
IE laver først en 50%bred højre margen og laver derefter en linje, der er 50% af den resterende bredde, 2px høj og centreret i venstre halvdel.
Netscape laver denne linje venstrestillet, 50% bred og 3px høj med hvid midte.
4: hr 50% bred; venstrejusteret.
<hr style="width:50%;text-align:left" />
Mozilla og FireFox laver denne linje centreret, 50% bred og 2px høj.
Opera og IE laver linjen venstrestillet, 50% bred og 2px høj.
Netscape laver denne linje centreret, 50% bred og 3px høj med hvid midte.
5: hr 50% højre-margen.
<hr style="margin-right:50%" />
Mozilla, FireFox og Opera laver denne linje 50% bred og venstrestillet.
IE laver linjen 34% bred og venstrestillet.
Netscape laver denne linje i fuld bredde og 3px høj med hvid midte.
6: hr i en div med 50% højre-margen.
<div style="margin-right:50%"><hr /></div>
Mozilla, FireFox, Netscape og Opera laver denne linje 50% bred og venstrestillet.
IE laver linjen 34% bred og venstrestillet.
Konklusion: Man kan ikke lave en hr, der ikke er centreret og som vises ens i alle browsere.
1: hr - ingen højde eller border defineret.
<hr />
Mozilla, FireFox, Opera og IE laver denne linje ens 2px høj.
Netscape laver linjen 3px høj med hvid midte.
2: hr med højde 5px
<hr style="height: 5px;" />
Mozilla, FireFox, Netscape og IE viser denne linje ens 5px inklusive border, Opera laver den 5px plus border.
3: hr med farvet border, for- og baggrundsfarve, højde 10px
<hr style="background-color: blue; color: lime; height: 10px; border: 2px solid red;" />
Mozilla, Firefox og Netscape laver denne linje med 2px rød border og 6px blå linje - i alt 10 px. IE laver linjen med 2px rød border og 6px grøn linje - i alt 10px. Opera laver linjen med 2px rød border og 10px blå linje - i alt 14px.
4: hr med border:none;, for- og baggrundsfarve sat til samme værdi (blue) og højde 10px.
<hr style="background-color: blue; color: blue; height: 10px; border: none;" />
Mozilla, Firefox, Netscape, Opera og IE laver denne linje ens - 10px blå.
Konklusion: Skal en farvet hr med højde vises ens i alle browsere, skal den defineres som det fjerde eksempel.
1: hr med defineret farve
<hr style="color: red;" />
IE laver en rød linje 2px høj.
Mozilla, FireFox og Opera laver en standard grå linje 2px høj.
Netscape laver en (Netscape-standard) linje 3px høj med hvid midte.
2: hr med defineret farve og baggrund
<hr style="color: red; background-color: red;" />
Mozilla, FireFox og IE laver en rød linje 2px høj.
Opera laver en standard grå linje 2px høj.
Netscape laver en rød linje 3px høj.
3: hr med defineret farve, baggrund og border
<hr style="color: red; background-color: red; border-color: red;" />
Mozilla, FireFox, Opera og IE laver en rød linje 2px høj.
Netscape laver en rød linje 3px høj.
4: hr med defineret baggrund og border
<hr style="background-color: red; border-color: red;" />
Mozilla, FireFox og Opera laver en rød linje 2px høj.
IE laver en standard grå linje 2px høj.
Netscape laver en rød linje 3px høj.
5: hr med defineret border
<hr style="border-color: red;" />
Opera laver en rød linje 2px høj.
Mozilla, FireFox og IE laver en standard grå linje.
Netscape laver en (Netscape-standard) linje 3px høj med hvid midte.
Konklusion: Skal man lave en farvet linje uden defineret højde, skal den defineres som det tredje eksempel, for at virke tilnærmelsesvis ens i alle browsere.
hr med defineret baggrundsbillede
<hr style="height:10px;background:url(hrbg.gif);border:none" />
Mozilla, FireFox, Netscape og Opera laver linjen ens 10px høj og med baggrundsbilledet vist.
IE laver lijen 10px høj og med baggrundsbilledet vist, men med en ikke-defineret border, der dækker øverste og nederste række pixels i billedet.