Outline auf einen Anker angewendet, der ein Bild enthält, hat in Chrome nicht die richtige Höhe
Für eine Site, an der ich arbeite, möchte ich einen gepunkteten Umriss um Links haben, wenn diese fokussiert / schwebend / aktiv sind. Ich möchte, dass dies für Text- und Bildlinks geschieht.
Das Problem, das ich habe, ist, dass mein Code in Firefox und IE hervorragend funktioniert. In Chrome 7.0.517.41 hat der gepunktete Umriss dieselbe Höhe wie mein Text und nicht die Höhe des Bildes.
Beispielcode
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
BODY { font: 15px/1.5 sans-serif; }
a:focus, a:hover, a:active { outline: 1px dotted #11aa22; }
</style>
</head>
<body>
<a href="#">
<img src="http://sstatic.net/stackoverflow/Img/wmd-buttons.png" />
</a>
</body>
</html>
Das ist nervig. Um dieses Problem zu umgehen, verwende ich Javascript, um eine Klasse zum Unterscheiden von Ankern mit Bildern anzuwenden, und stelle sicher, dass die Gliederung für Anker mit Bildern auf den Anker angewendet wird, nicht auf das Bild:
a:focus, a:hover, a:active { outline: 1px dotted #11aa22; }
a:focus.img, a:hover.img, a:active.img { outline: none; }
a:focus img, a:hover img, a:active img { outline: 1px dotted #11aa22; }
Und in meinem Dokument bereit
$('a:has(img)').addClass('img');
Gibt es einen besseren Weg, dies zu tun?