O contorno aplicado a uma âncora que contém uma imagem não é a altura certa no Chrome
Para um site em que estou trabalhando, gostaria que um esboço pontilhado aparecesse nos links quando eles estiverem focados / pairados / ativos. Eu gostaria que isso acontecesse para links de texto e imagem.
O problema que tenho é que, enquanto meu código funciona muito bem no Firefox e no IE, no Chrome 7.0.517.41 o contorno pontilhado tem a mesma altura do meu texto, não a altura da imagem.
Código de amostra:
<!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>
Isso é chato. Como solução alternativa, uso o javascript para aplicar uma classe para distinguir âncoras que contêm imagens e garantir que o contorno das âncoras que contêm imagens seja aplicado à âncora, não à imagem:
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; }
E no meu documento pronto
$('a:has(img)').addClass('img');
Existe uma maneira melhor de fazer isso?