El contorno aplicado a un ancla que contiene una imagen no tiene la altura correcta en Chrome
Para un sitio en el que estoy trabajando, me gustaría que aparezca un esquema punteado alrededor de los enlaces cuando están enfocados / suspendidos / activos. Me gustaría que esto suceda para los enlaces de texto e imagen.
El problema que tengo es que, si bien mi código funciona muy bien en Firefox e IE, en Chrome 7.0.517.41 el contorno punteado tiene la misma altura que mi texto, no la altura de la imagen.
Código de muestra:
<!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>
Esto es molesto. Como solución alternativa, uso JavaScript para aplicar una clase para distinguir las anclas que contienen imágenes y asegurarme de que el contorno de las anclas que contienen imágenes se aplique al ancla, no a la imagen:
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; }
Y en mi documento listo
$('a:has(img)').addClass('img');
¿Hay una mejor manera de hacer esto?