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

发布于 2024-09-28 09:47:11 字数 1030 浏览 8 评论 0原文

对于我正在开发的网站，我希望当链接聚焦/悬停/活动时，链接周围会出现虚线轮廓。我希望文本和图像链接发生这种情况。

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

是否有更好的方法来执行此操作？

原文

For a site I'm working on, I'd like to have a dotted outline appear around links when they are focused/hovered/active. I'd like this to happen for text and image links.

The issue I have is that whilst my code works great in Firefox and IE, in Chrome 7.0.517.41 the dotted outline is the same height as my text, not the height of the image.

Sample code:

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

This is annoying. As a workaround I use javascript to apply a class to distinguish anchors containing images, and ensure that the outline for anchors containing images is applied to the anchor, not the image:

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

And in my document ready