Jak mogę zmienić grubość mojego znacznika <hr>


311

Chcę zmienić grubość mojej poziomej reguły ( <hr>) w CSS. Wiem, że można to zrobić w HTML -

<hr size="10">

Ale słyszę, że jest to przestarzałe, jak wspomniano tutaj w MDN . W CSS próbowałem użyć, height:1pxale nie zmienia to grubości. Chcę, żeby <hr>linia była 0.5pxgruba.

Korzystam z Firefox 3.6.11 na Ubuntu


Chcę, żeby był naprawdę cienki, użytkownik nie powinien zauważyć, że jest tam, chyba że go specjalnie szuka. W każdym razie próbuję ...
Srikar Appalaraju,

7
Możesz także spróbować zmienić kolor tła, aby wtapiał się w ...
JustcallmeDrago,

4
Ponieważ 1px jest minimalny, powinieneś uczynić linię jasnoszarą, jeśli chcesz, aby była mniej zauważalna.
Gert Grenander,

2
@MovieYoda: Wymiary mogą przechodzić w subpiksele, ale renderowanie zostanie zaokrąglone do najbliższego piksela. To jak oczekiwanie, że wartość całkowita będzie wynosić 1,23784 ... Niemożliwe. Możesz ustawić tę wartość, ale zostanie ona zaokrąglona do najbliższej liczby całkowitej. Teoretycznie możesz renderować szerokości zaokrąglone do 1/3 piksela na wyświetlaczach LCD ze względu na specyfikę technologii, ale wątpię, czy przeglądarki faktycznie to robią. Pozostały wymiar subpikseli nie może mieć żadnego koloru, ponieważ jest związany tylko z jednym z luminoforów RGB.
Robert Koritnik,

15
Nie pół piksela, pół piksela. Pytanie nie jest całkowicie głupie. reddit.com/r/shittyprogramming/comments/20zyea/…
Luke Rehmann

Odpowiedzi:


523

Aby uzyskać spójność, usuń wszelkie granice i użyj wysokości dla <hr>grubości. Dodanie koloru tła spowoduje stylizację <hr>z określoną wysokością i kolorem.

W twoim arkuszu stylów:

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

Lub wbudowany, jak masz:

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

Dłuższe wyjaśnienie tutaj


10
dlaczego robisz border:none? Jakiegokolwiek powodu? Czy obramowanie również dodaje grubość?
Srikar Appalaraju,

11
Tak, chcemy użyć koloru tła do wyświetlenia linii dla zachowania spójności. FF używa obramowania, aby utworzyć <hr>, ale to znaczy nie. To sprawi, że oba będą takie same.
Gregg B,

2
Tak, zawsze uważałem tagi <hr> w różnych przeglądarkach za nieznośne. Miło jest, aby zachowywały się prawidłowo.
Gregg B,

Lub, jeśli potrzebujesz jednorazowego, możesz to zrobić w zgodzie z<hr style="border: none; height:1px; color:#333; background-color:#333;">;
Jesse Chisholm

1
Ile lat IE ma awarię color?
próbuje

53

Renderowanie subpikseli w przeglądarkach

Renderowanie subpikseli jest trudne. Nie można oczekiwać, że monitor wyświetli cienką linię o grubości mniejszej niż piksel. Ale możliwe jest podanie wymiarów subpikseli. W zależności od przeglądarki renderują je inaczej. Sprawdź post na ten temat w blogu Johna Resiga .

Zasadniczo, jeśli monitor jest wyświetlaczem LCD i rysujesz linie pionowe, możesz łatwo narysować linię 1/3 pikseli. Jeśli tło jest białe, podaj kolor linii #f0f. Dla oka ta linia będzie miała 1/3 szerokości piksela. Chociaż będzie miał jakiś kolor, jeśli powiększysz monitor, zobaczysz, że tylko jeden segment całego piksela (składający się z RGB) będzie ciemny. Jest to technika stosowana do precyzyjnego podpowiedzi typu, tj . ClearType .

Ale linie poziome mogą mieć wysokość tylko pełnego piksela. To ograniczenie technologiczne monitorów LCD. Kineskopy były jeszcze bardziej skomplikowane z ich trójkątnymi luminoforami (chyba że były to kratki typu apertura, np. Sony Trinitron), ale to inna historia.

Zasadniczo podanie wymiaru subpikselowego i oczekiwanie, że będzie renderowany w ten sposób, jest tym samym, co oczekiwanie, że zmienna całkowita będzie przechowywać liczbę 1,2034759349. Jeśli zrozumiesz, że jest to niemożliwe, powinieneś zrozumieć, że monitory nie są w stanie renderować wymiarów subpikseli.

Bezpieczny styl dla różnych przeglądarek

Ale sposób, w jaki mieszają się poziome reguły, zwykle wykonuje się za pomocą kolorów. Więc jeśli twoje tło jest na przykład białe ( #fff), zawsze możesz zrobić HR bardzo jasne. Jak #eee.

Bezpiecznym stylem dla wielu przeglądarek dla bardzo lekkiej reguły poziomej byłoby:

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

I użyj pliku CSS zamiast stylów wbudowanych. Zapewniają one centralną definicję całej witryny, a nie tylko konkretnego elementu. To znacznie ułatwia konserwację.


8

Szukałem najkrótszego sposobu na narysowanie linii 1px, ponieważ całe obciążenie oddzielonego CSS nie jest najszybszym ani najkrótszym rozwiązaniem.

Aż do HTML5, WAS był krótszy dla 1px hr: <hr noshade>, ale .. Atrybut noshade <hr> nie jest obsługiwany w HTML5. Zamiast tego użyj CSS. (ani inne atrybuty używane wcześniej, jako rozmiar, szerokość, wyrównanie ) ...


Teraz ten jest dość trudny, ale działa dobrze, jeśli potrzebna jest najprostsza godzina 1px:

Odmiana 1, CZARNY godz .: (najlepsze rozwiązanie dla czerni)

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

Wyjście: FF, Opera - czarny / Safari - ciemnoszary


Wariant 2, SZARY godz. (Najkrótszy!):

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

Wyjście: Opera - ciemnoszary / FF - szary / Safari - jasnoszary


Wariant 3, KOLOR zgodnie z życzeniem:

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

Wyjście: Opera / FF / Safari: 1px czerwony.


Byłbym zadowolony, jeśli ktoś przetestuje to dla Chrome i IE. Dwie pierwsze odmiany są dość trudne, szczególnie. Druga odmiana, która wyświetla pierwsze CZARNE 1px.
Muscaria

Podoba mi się to rozwiązanie, ponieważ nie koduje na stałe żadnych informacji o kolorze, co może być przydatne dla zgodności z trybem ciemności. Działa OK w Chrome.
tresf

6

Zalecałbym ustawienie HRsamej wartości jako 0pxwysokiej i użycie jej obramowania, aby była widoczna. Zauważyłem, że podczas powiększania i pomniejszania (ctrl + kółko myszy) sama grubość HRsię zmienia, a po ustawieniu ramki zawsze pozostaje taka sama:

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

Widzę, że w najnowszym Chrome zmienia grubość na pozostałej części strony. Co gorsza, może zniknąć po pomniejszeniu :(
Pavel Alexeev

5

wysokość atrybutu została uznana za przestarzałą w html 5. To, co bym zrobił, to utworzyć ramkę wokół godziny i zwiększyć jej grubość jako taką: hr style = "border: solid 2px black;"


1

Dodałem krycie do linii, więc wydaje się cieńsze:

<hr style="opacity: 0.25">

0

Uważam, że najlepsze osiągnięcie dla <hr>tagu stylizacji jest następujące:

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

I kodu HTML wystarczy dodać: <hr>.


0

Oto rozwiązanie dla 1-pikselowej czarnej linii bez obramowania i marginesu

hr {background-color:black; border:none; height:1px; margin:0px;}
  • Testowane w Google Chrome

Myślałam, że to dlatego, dodać pozostałe odpowiedzi nie obejmują: margin:0px;.

  • Próbny

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>


-4

Sugeruję użycie konstrukcji podobnej do

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

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

Heheheh :) Nigdy wcześniej tego nie widziałem :)
Prakash Raman
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.