Tipps zu Cascading Style Sheets (CSS)

Wird a:link mit text-decoration: none; formatiert jedoch die Pseudoklasse a:hover mit text-decoration: underline;, wirkt bei gleichzeitigem font-weight: bold; die Darstellung je nach Browser oft sehr ruckelig.
Hat a:hover jedoch auch ein text-decoration: none; und z. B. einen formatierten unteren Rand, wird der angebliche Unterstrich beim Überfahren mit der Maus sehr flüssig und in jedem Browser gleich dargestellt.

Beispiel 1 unten rendert einen Box-Rahmen rund um den Link. Um einen Unterstrich zu rendern, nimm border-bottom: 1px solid #06c;. Durch zusätzliche margin- und padding-Werte könnte das Aussehen der Linien noch feiner abgestimmt werden. In diesem Szenario wird das Layout weder bei klassischem noch bei alternativem Ansatz wegen dem Statement font-weight: bold; zittern, nicht wegen dem underline.

a:hover, a:focus {
    border-bottom: 1px solid #0066cc;
    color: #0066cc;
    font-weight: bold;
    text-decoration: none;
}

Ein effektiverer Ansatz (Beispiel 2) dazu wäre eine Oberklasse, die die Werte einer gewählten Unterklasse annimmt oder erbt. Das Hauptproblem ist, dass bei font-weight: bold; z. B. Firefox den Unterstrich fett rendert im Gegensatz zu anderen Browsern wie etwa Opera, weshalb ich in diesem Fall Beispiel 1 bevorzuge.

/* Oberklasse */
a, .noUnderLine {
    text-decoration: none;
}

/* Unterklasse */
a:hover, a:active, a:focus, .uLine {
    text-decoration: underline;
}