我正在将样式应用于以下行上的焦点元素：
.<class-name>:focus {
outline: 4px auto #068065 !important;
outline-offset: 2px !important;
}
（这是 Chrome 扩展代码的一部分，因此不需要跨浏览器）。
问题是当大纲样式为“自动”时，大纲偏移不会应用于 Chrome/Windows。在 Chrome/Mac 上，这很好用。
如果我将轮廓样式从“自动”更改为“实体”，轮廓偏移就可以正常工作。
我希望能够同时使用“自动”样式和轮廓偏移。有什么想法或建议吗？
对于我正在处理的网站，我希望在链接聚焦/悬停/活动时在链接周围出现虚线轮廓。我希望文本和图像链接发生这种情况。
我遇到的问题是，虽然我的代码在 Firefox 和 IE 中运行良好，但在 Chrome 7.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');
有一个更好的方法吗？