应用于包含图片的锚点的轮廓在Chrome中的高度不正确 [英] Outline applied to an anchor containing an image isn't the right height in Chrome
问题描述
对于我正在工作的网站，当他们聚焦/悬停/活动时，我想在链接周围显示一个虚线轮廓。
我遇到的问题是，虽然我的代码在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'）;有没有更好的方法来做这个？
您必须将链接设置为封装图片的链接， a {display：inline-block; }
例如
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
$('a:has(img)').addClass('img');
Is there a better way to do this?
You have to set links as blocks for they wrap images, as
a { display:inline-block; }
eg.
这篇关于应用于包含图片的锚点的轮廓在Chrome中的高度不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
