Hallo, Kai,
Wenn man ein vorhersagbares Ergebnis haben will, dürfte ein <div> ohne Inhalt, dafür aber mit genauen width und height Werten zuverlässiger sein.
ich arbeite meist mit border-top und padding-top anstatt mit hr, wie hier bspw. bei den h2-Elementen: http://home.t-online.de/home/dj5nu/js-popup.html
Leere div-Container mit Hintergrundfarbe und festen (relativen, also % oder em) Größen finde ich selbst als Workaround unpassend, schließlich kann man das als sinnloses bzw. zweckentfremdetes Markup ansehen. In dem Falle würde ich die reine CSS-Lösung bevorzugen.
Besser ist trotzdem, eine "ordentliche" Trennlinie mit <hr />, um auch nichtvisuelle Benutzeragenten zu bedienen. Die von uns genannten Alternativen funktionieren nur mit CSS; es sollte jedoch imho eine HTML-Lösung gewählt werden, denn hier geht es nicht unbedingt um das Layout als Zusatz zum Markup.
Wobei ich finde, dass das Element hr mehr oder weniger <font> gleicht, denn vom Namen her zielt eine "horizontal rule" auf grafische Ausgabemedien[*]. Dabei beinhaltet die Semantik von hr eher dass zwei (gedankliche/thematische) Bereiche differenziert werden und einen "Einschnitt" vollzogen wird - ein Grafikbrowser könnte das mit einer Trennlinie symbolisieren, ein Sprachbrowser könnte bspw. eine Pause einlegen, und so fort.
[*] *nachschau* Der Standard sagt: "The HR element causes a horizontal rule to be rendered by visual user agents." Also mehr oder weniger doch eine Perversität wie das font-Element, welche weniger mit strukturierendem Markup zu tun hat.
Meiner Meinung nach sollten alle Attribute und Elemente auf der Seite http://www.w3.org/TR/html401/present/graphics.html aus dem Standard fliegen... :) bzw. ersetzt werden, wie <b> -> <em>/<strong> etc.
*lol* Dabei fallen mir unendlich viele perverse Workarounds ein:
<div style="width:80%; height:0.5em; background-color:#ccc; margin-left:auto; margin-right:auto;"><span style="display:none;">--------------------------...</span></div>
So hätte man zwar in Textbrowsern einen horizontalen Strich, aber Voicebrowser würden "strichstrichstrichstrichstrich..." vorlesen. :) Erinnert an WYSIWYG-Editoren, die als alt-Attribut bei Grafiken den Dateinamen und die Dateigröße setzen - sehr intelligent.
Mathias