3

对于我正在处理的网站，我希望在链接集中/悬停/活动时在链接周围出现一个虚线轮廓。我希望文本和图像链接发生这种情况。

我遇到的问题是，虽然我的代码在 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');

有一个更好的方法吗？

4

1 回答 1

6

您必须将链接设置为块，以便它们包装图像，如

a { display:inline-block; }

例如。

于 2010-10-20T07:36:09.397 回答