对于我正在处理的网站,我希望在链接处于焦点/悬停/事件状态时在链接周围显示一个虚线轮廓。我希望这种情况发生在文本和图像链接上。
我遇到的问题是,虽然我的代码在 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 应用一个类来区分包含图像的 anchor ,并确保将包含图像的 anchor 的轮廓应用于 anchor ,而不是图像:
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');
有更好的方法吗?
最佳答案
您必须将链接设置为 block ,因为它们会包装图像,如
a { display:inline-block; }
例如。
关于html - 应用于包含图像的 anchor 的轮廓在 Chrome 中的高度不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3975587/