应用于包含图像的锚点的轮廓在Chrome中的高度不正确

对于我正在工作的站点,我希望在链接处于焦点/悬停/活动状态时,在链接周围出现一个虚线轮廓。我希望这种情况发生在文本和图像链接。

我的问题是,虽然我的代码在Firefox和IE中运行良好,但在Chrome7.0.517.41中,虚线轮廓与文本的高度相同,而不是图像的高度。

示例代码:

<!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>

这真烦人。作为一种解决方法,我使用javascript应用一个类来区分包含图像的锚点,并确保包含图像的锚点的轮廓应用于锚点,而不是图像:

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; }

在我的文件里准备好了吗

$('a:has(img)').addClass('img');

有没有更好的办法?