web-dev-qa-db-de.com

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

Ich möchte die Dicke meiner horizontalen Linie (<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 erwähnt auf MDN hier . In CSS habe ich versucht, height:1px zu verwenden, aber die Dicke ändert sich nicht. Ich möchte, dass die <hr> -Zeile 0.5px dick ist.

Ich benutze Firefox 3.6.11 unter Ubuntu

279

Entfernen Sie aus Gründen der Konsistenz alle Ränder und verwenden Sie die Höhe für die Dicke von <hr>. Durch Hinzufügen einer Hintergrundfarbe wird Ihr <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

481
Gregg B

Subpixel-Rendering in Browsern

Subpixel-Rendering ist schwierig. Sie können nicht wirklich erwarten, dass ein Monitor eine dünne Linie von weniger als einem Pixel wiedergibt. Es ist jedoch möglich, Subpixel-Dimensionen bereitzustellen. Je nach Browser werden diese unterschiedlich gerendert. Überprüfen Sie diese John Resig Blog-Post 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 die Linienfarbe #f0f an. Für das Auge ist diese Linie 1/3 Pixel breit. Wenn Sie den Monitor vergrößern, sehen Sie, 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, d. H. ClearType .

Horizontale Linien können jedoch nur ein ganzes Pixel hoch sein. Das ist eine technologische Einschränkung von LCD Monitoren. CRTs waren mit ihren dreieckigen Leuchtstoffen noch komplizierter (es sei denn, sie waren Aperturgitter Typ, dh Sony Trinitron), aber das ist eine andere Geschichte.

Wenn Sie eine Subpixel-Dimension bereitstellen und erwarten, dass sie auf diese Weise gerendert wird, entspricht dies im Wesentlichen der Erwartung, dass in einer Ganzzahlvariablen eine Zahl von 1,2034759349 gespeichert wird. Wenn Sie verstehen, dass dies nicht möglich ist, sollten Sie verstehen, dass Monitore keine Subpixel-Dimensionen darstellen können.

Browserübergreifender sicherer Stil

Die Art und Weise, wie horizontale Regeln, die in einfügen, normalerweise mit Farben durchgeführt werden. Wenn Ihr Hintergrund zum Beispiel weiß ist (#fff), können Sie Ihr HR immer sehr hell machen. Wie #eee.

Der browserübergreifende Sicherheitsstil für sehr leichte horizontale Regeln wäre:

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

Und 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. Es macht die Wartbarkeit viel besser.

51
Robert Koritnik

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 Attribute, die zuvor verwendet wurden.) , wie Größe, Breite, ausrichten ) ...


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

Variante 1, BLACK hr: (beste Lösung für Schwarz)

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

Ausgabe: FF, Opera - Schwarz/Safari - Dunkelgrau


Variante 2, GRAU 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.

8
Muscaria

Ich würde empfehlen, HR selbst auf 0px hoch zu setzen und stattdessen den Rahmen zu verwenden, um sichtbar zu sein. Mir ist aufgefallen, dass sich beim Vergrößern und Verkleinern (Strg + Mausrad) die Dicke von HR selbst ändert, während sie beim Festlegen des Rahmens immer gleich bleibt:

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

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

4
meddy

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

<hr style="opacity: 0.25">
1
Gaunt