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

312

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

Srikar Appalaraju
quelle
Ich möchte, dass es wirklich dünn ist. Der Benutzer sollte nicht bemerken, dass es dort ist, es sei denn, er sucht speziell danach. Wie auch immer, probieren Sie es aus ...
Srikar Appalaraju
7
Sie können auch versuchen, es mehr die Farbe des Hintergrunds zu machen, damit es sich
einfügt
4
Da mindestens 1 Pixel vorhanden ist, sollten Sie die Linie hellgrau machen, wenn Sie möchten, dass sie weniger auffällt.
Gert Grenander
2
@MovieYoda: Bemaßungen können Subpixel sein, aber das Rendern wird auf das nächste Pixel gerundet. Es ist, als würde man einen ganzzahligen Wert von 1,23784 erwarten ... Unmöglich. Sie können diesen Wert festlegen, er wird jedoch auf die nächste ganze Zahl gerundet. Theoretisch könnte man auf LCDs aufgrund technologischer Besonderheiten auf 1/3 Pixel gerundete Breiten rendern, aber ich bezweifle, dass Browser dies auch tatsächlich tun. Die verbleibende Subpixel-Dimension kann keine Farbe haben, da sie sich nur auf einen der RGB-Leuchtstoffe bezieht.
Robert Koritnik
15
Nicht ein halbes Pixel, ein halbes Pixel. Die Frage ist nicht ganz dumm. reddit.com/r/shittyprogramming/comments/20zyea/…
Luke Rehmann

Antworten:

524

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

Gregg B.
quelle
10
warum machen Sie border:none? Irgendein Grund? Fügt der Rand auch die Dicke hinzu?
Srikar Appalaraju
11
Ja, wir möchten die Hintergrundfarbe für die Anzeige der Linie verwenden, um die Konsistenz zu gewährleisten. FF verwendet den Rand, um das <hr> zu erstellen, dh nicht. Dadurch werden beide gleich.
Gregg B
2
Ja, ich fand browserübergreifende <hr> -Tags immer unangenehm. Es ist schön, dass sie sich richtig verhalten.
Gregg B
Oder, wenn Sie nur eine einmalige brauchen, können Sie es inline mit<hr style="border: none; height:1px; color:#333; background-color:#333;">;
Jesse Chisholm
1
Wie alt von IE für den Fallback color?
Tryse
53

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.

Robert Koritnik
quelle
8

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


Variante 3, FARBE nach Wunsch:

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

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

Muscaria
quelle
Ich würde mich freuen, wenn bitte jemand es für Chrome und IE testen wird. Die ersten beiden Variationen sind ziemlich knifflig, insb. 2. Variante, die zuerst BLACK 1px sichtbar ausgibt.
Muscaria
Ich mag diese Lösung, weil sie keine Farbinformationen fest codiert, was für die Kompatibilität mit dem Dunkelmodus nützlich sein kann. Funktioniert in Chrome einwandfrei.
Tresf
6

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;
}
Yaerius
quelle
Ich kann sehen, dass sich im neuesten Chrome die Dicke entlang des Restes der Seite ändert. Was noch schlimmer ist, es kann verschwinden, wenn Sie herauszoomen :(
Pavel Alexeev
5

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;"

meddy
quelle
1

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

<hr style="opacity: 0.25">
Hager
quelle
0

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>.

Jodyshop
quelle
0

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>

theMaxx
quelle
-4

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>
Ankheg
quelle
Heheheh :) Noch nie gesehen :)
Prakash Raman