Wie kann ich die Dicke meines <hr> -Tags ändern?

Ich möchte die Dicke meiner horizontalen Regel ( <hr>) in CSS ändern . Ich weiß, dass es in HTML so gemacht werden kann -

<hr size="10">

Aber ich höre, dass dies veraltet ist, wie hier auf MDN erwähnt . In CSS habe ich versucht, height:1pxaber es ändert nicht die Dicke. Ich möchte, dass die <hr>Linie 0.5pxdick ist.

Ich verwende Firefox 3.6.11 unter Ubuntu

Entfernen Sie aus Gründen der Konsistenz alle Ränder und verwenden Sie die Höhe für die <hr>Dicke. Durch Hinzufügen einer Hintergrundfarbe wird Ihr Stil <hr>mit der angegebenen Höhe und Farbe gestaltet.

In Ihrem Stylesheet:

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #333; /* old IE */
    background-color: #333; /* Modern Browsers */
}

Oder inline wie Sie es haben:

<hr style="height:1px;border:none;color:#333;background-color:#333;" />

Längere Erklärung hier

Subpixel-Rendering in Browsern

Das Rendern von Subpixeln ist schwierig. Sie können nicht erwarten, dass ein Monitor eine dünne Linie von weniger als einem Pixel rendert. Es ist jedoch möglich, Subpixel-Dimensionen bereitzustellen. Je nach Browser rendern sie diese unterschiedlich. Überprüfen Sie diesen Blog-Beitrag von John Resig darüber.

Wenn Ihr Monitor ein LCD ist und Sie vertikale Linien zeichnen, können Sie problemlos eine 1/3 Pixel-Linie zeichnen. Wenn Ihr Hintergrund weiß ist, geben Sie Ihre Linienfarbe an #f0f. Für das Auge ist diese Linie 1/3 Pixel breit. Obwohl es eine gewisse Farbe hat, würden Sie beim Vergrößern des Monitors sehen, dass nur ein Segment des gesamten Pixels (bestehend aus RGB) dunkel ist. Dies ist so ziemlich die Technik, die für feine Typhinweise verwendet wird, dh ClearType .

Horizontale Linien können jedoch nur ein ganzes Pixel hoch sein. Das ist die technologische Einschränkung von LCD-Monitoren. CRTs waren mit ihren dreieckigen Leuchtstoffen noch komplizierter (es sei denn, es handelte sich um Blendengitter, z. B. Sony Trinitron), aber das ist eine andere Geschichte.

Grundsätzlich ist das Bereitstellen einer Subpixel-Dimension und das Erwarten, dass sie auf diese Weise gerendert wird, dasselbe wie das Erwarten, dass eine Ganzzahlvariable eine Zahl von 1,2034759349 speichert. Wenn Sie verstehen, dass dies unmöglich ist, sollten Sie verstehen, dass Monitore keine Subpixel-Dimensionen rendern können.

Browserübergreifender sicherer Stil

Die Art und Weise, wie horizontale Regeln eingefügt werden, erfolgt normalerweise mithilfe von Farben. Wenn Ihr Hintergrund zum Beispiel weiß ( #fff) ist, können Sie immer HR sehr hell sein. Wie #eee.

Der browserübergreifende sichere Stil für eine sehr leichte horizontale Regel wäre:

hr
{
    background-color: #eee;
    border: 0 none;
    color: #eee;
    height: 1px;
}

Verwenden Sie eine CSS-Datei anstelle von Inline-Stilen. Sie bieten eine zentrale Definition für die gesamte Site und nicht nur für ein bestimmtes Element. Dies verbessert die Wartbarkeit erheblich.

Ich suchte nach dem kürzesten Weg, um eine 1px-Linie zu zeichnen, da die gesamte Ladung von getrenntem CSS nicht die schnellste oder kürzeste Lösung ist.

Bis zu HTML5 war der Weg für 1px hr kürzer: <hr noshade> aber .. Das noshade-Attribut von <hr> wird in HTML5 nicht unterstützt. Verwenden Sie stattdessen CSS. (noch andere zuvor verwendete Attribute wie Größe, Breite, Ausrichtung ) ...

Nun, dieser ist ziemlich knifflig, funktioniert aber gut, wenn die einfachste 1px-Stunde benötigt wird:

Variante 1, SCHWARZ Std.: (Beste Lösung für Schwarz)

<hr style="border-bottom: 0px">

Ausgabe: FF, Opera - Schwarz / Safari - Dunkelgrau

Variante 2, GRAUE Stunde (kürzeste!):

<hr style="border-top: 0px">

Ausgabe: Opera - dunkelgrau / FF - grau / Safari - hellgrau

<hr style="border: none; border-bottom: 1px solid red;">

Ausgabe: Opera / FF / Safari: 1px rot.

Ich würde empfehlen, das HRselbst auf 0pxhoch zu setzen und stattdessen den Rand zu verwenden, um sichtbar zu sein. Ich habe festgestellt, dass sich beim Vergrößern und Verkleinern (Strg + Mausrad) die Dicke HRändert, während beim Festlegen des Rahmens immer die Dicke gleich bleibt:

hr {
    height: 0px;
    border: none;
    border-top: 1px solid black;
}

Das Attribut height ist in HTML 5 veraltet. Ich würde einen Rahmen um die Stunde erstellen und die Dicke des Rahmens als solchen erhöhen: hr style = "border: solid 2px black;"

Ich habe der Linie Deckkraft hinzugefügt, damit sie dünner erscheint:

<hr style="opacity: 0.25">

Ich glaube, die beste Leistung für das Styling von <hr>Tags ist wie folgt:

hr {
color:#ddd;
background-color:
#ddd; height:1px;
border:none;
max-width:100%;
}

Und für den HTML-Code fügen Sie einfach hinzu : <hr>.

Hier ist eine Lösung für eine schwarze 1-Pixel-Linie ohne Rand oder Rand

hr {background-color:black; border:none; height:1px; margin:0px;}

• In Google Chrome getestet

Ich dachte, ich würde dies hinzufügen, weil die anderen Antworten nicht enthielten : margin:0px;.

• Demo

hr {background-color:black; border:none; height:1px; margin:0px;}

<div style="border: 1px solid black; text-align:center;">
<div style="background-color:lightblue;"> ↑ container ↑ <br> <br> <br> ↓ hr ↓ </div>
<hr>
<div style="background-color:lightgreen;"> ↑ hr ↑ <br> <br> <br> ↓ container ↓ </div>
</div>

Ich schlage vor, Konstruktion wie zu verwenden

<style>
  .hr { height:0; border-top:1px solid _anycolor_; }
  .hr hr { display:none }
</style>

<div class="hr"><hr /></div>