text-decoration: unterstreichen vs border-bottom

Question

Was ist der Unterschied zu {text-decoration: underline} und {border-bottom: ...} zu verwenden?

was ist einfach zu stylen und Cross-Browser-kompatibel?

Wann sollten wir border-bottom über verwenden?

Wäre es gut, border-bottom immer anstelle von zu verwenden?

Answer 1

border-bottom fügt eine Zeile am Ende der Elementbox ein. text-decoration:underline rendert den Text unterstrichen. Der genaue Unterschied hängt von den verwendeten HTML- und Textlayout-Engines ab, aber im Allgemeinen, wenn Sie Text unterstrichen haben möchten, dann unterstreichen Sie ihn.

Answer 2

bottom-border können Sie den Abstand zwischen dem Text und der Unterstreichung steuern, so dass es vielseitiger ist. Und (wie oben erwähnt) erlaubt es eine andere Farbe für die Unterstreichung (obwohl ich keinen Grund sehe, warum Sie das tun wollen).

text-decoration ist mehr "korrekt", weil es die "echte" CSS-Eigenschaft ist, die zum Unterstreichen von Text gedacht ist.

Wenn Sie für alle Links setzen, müssen Sie text-decoration: none für spezielle Links setzen, für die Sie keine Unterstreichung benötigen. Wenn Sie stattdessen border-bottom verwenden, speichern Sie eine Zeile CSS-Code (stellen Sie text-decoration: none in Ihrem Reset-CSS ein.

also alles in allem werde ich für border-bottom stimmen, wenn Sie ein komplexes Layout mit haben verschiedene Stile für jeden Link aber text-decoration für eine einfache Website-Code ‚durch das Buch‘.

Answer 3

Wie Ignacio sagte border-bottom die Linie am unteren Rand des enthaltenden Box setzen, während text-decoration:underline tatsächlich den Text unterstreichen. Dies wird zu einer Wichtiger Unterschied für mehrzeilige Strings

I am a single line and will look similar for both methods 
--------------------------------------------------------- 

würde wahrscheinlich das gleiche für beide Stile wiedergeben, aber Sie erhalten das folgende für mehrzeilige Zeichenfolgen.

I am a string that has been 
split and added a border-bottom 
------------------------------- 

I am a string that has been 
--------------------------- 
split and underlined 
-------------------- 

Entschuldigt Code Formatierung nicht ordnungsgemäß diese Beispiele zerreißend, aber man kann den Punkt sehe ich machen werde versuchen.

Answer 4

Entschuldigung, dies zu sagen, aber einige Antworten hier sind irreführend. Beim Teilen einer Textzeile wird der Rahmen aufgrund der Art der Inline-Blöcke nicht am unteren Rand des gesamten Blocks platziert. Rahmen unter Links sind in Browsern konsistenter als Text-Dekoration: Unterstreichen.

See: Text-Decoration vs. Border-Bottom

Answer 5

Setzen Sie Ihren Text inline angezeigt werden (eigentlich soll es sein, dass in der Standardeinstellung) bewirkt, dass die border-bottom viel als text-decoration Regel zu machen.

aber ich nehme an, dass Sie diese Technik auf die Links verwenden möchten, indem Sie folgendermaßen vorgehen:

/* my super eye catching dual colour link */ 
a { 
    color:black; 
    border-bottom:1px solid red; 
} 

was schön und gut ist, aber Sie werden feststellen, dass überall dort, wo Sie haben ein img-Tag in ein Link, das Bild wird eine rote Grenze darunter haben.

Wenn Sie eine Möglichkeit finden, das Elternelement eines Seitenelements (das Bild) mit vorhandenen Selektoren und ohne Javascript zu targetieren, kaufe ich Ihnen ein Bier, aber ich glaube nicht, dass Sie viel Glück haben werden.

Verwendung von "Text-Dekoration" vermeidet dieses Problem insgesamt, da ein Bild eindeutig nicht Text ist, wird es nicht unterstreichen, wenn innerhalb einer Verknüpfung.

Wenn Sie die vollständige Kontrolle über Ihr Markup haben, können Sie sich vermutlich durch Hinzufügen von Klassen zu jedem Link durchschlagen, aber wenn Sie mit einem gängigen CMS-System arbeiten, werden Sie mit dieser Idee kämpfen.

Answer 6

diese Grenze Versuchen mit 1px Bild

a:hover { 
    background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent; 
    background-color: transparent; 
    background-image: url("img/bg-link-hover.png"); 
    background-repeat: repeat-x; 
    background-attachment: scroll; 
    background-position: 0px 92%; 
    background-clip: border-box; 
    background-origin: padding-box; 
    background-size: auto auto; 
} 

Answer 7

Zwar gibt es immer wieder Fälle, gehen zu sein, wo man besser geeignet ist als die andere, border-bottom bietet viel genauere Kontrolle über text-decoration und daher wahrscheinlich die bevorzugte Methode ist. Hier ist eine schnelle (wahrscheinlich keinen Anspruch auf Vollständigkeit) Liste von Eigenschaften, die border-bottom steuern/ermöglichen, dass text-decoration kann nicht:

1. Abstand zwischen Text und „unterstreichen“
2. „Unterstrichen“ Art (punktiert, gestrichelt, fest, Gradient, image)
3. Thickness
4. CSS-Übergänge/Animationen
5. Trennung von Farbe zwischen Text und "hervorheben"

In vielen Fällen werden die meisten dieser Fähigkeiten nicht benötigt - aber es ist gut, sie verfügbar zu haben! Ich habe auf die Verwendung border-bottom in erster Linie für die Möglichkeit, ein paar Pixel der Polsterung zwischen dem Text und der Unterstreichung zu setzen geschaltet; Die nächste häufigste Verwendung, die ich gefunden habe, ist die Scheidung der Unterstreichung von der Textfarbe.

Mit CSS Variablen nun in allen wichtigen Browser Versand, ein „Reset“ Sheet wie folgt aussehen könnte:

:root { 
    --link-color: blue; 
    --hover-color: purple; 
    --underline-color: var(--link-color); 
} 

a { 
    color: var(--link-color); 
    text-decoration: none; 
    border-bottom: 1px solid var(--underline-color); 
} 

a:hover { 
    color: var(--hover-color); 
    border-bottom-color: var(--hover-color); 
} 

diese Weise Links werden auf einem „default“ Basis wie erwartet angezeigt, aber immer noch erlauben zur Anpassung nach Bedarf.