Outline applied to an anchor containing an image isn't the right height in Chrome_问答_开发者

Outline applied to an anchor containing an image isn't the right height in Chrome

开发者 https://www.devze.com 2023-01-21 15:46 出处：网络

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.

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 cont开发者_StackOverflow社区aining 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