All geek questions in one place

The scheme anchored to the anchor containing the image does not match the height in Chrome

For the site I’m working on, I would like for the links to be dashed around when they are focused / freeze / active. I would like this to happen for text and graphic links.

The problem is that although my code works fine in Firefox and IE, in Chrome 7.0.517.41 the dashed outline has the same height as my text, not the image height.

Code example:

<!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 the class to highlight anchors containing images, and make sure that the outline of anchors containing images is applied to the anchor and not to 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 are ready

$('a:has(img)').addClass('img');

Is there a better way to do this?

+3
1

,

a { display:inline-block; }

.

+4

Source: https://habr.com/ru/post/1770466/

More articles:


All Articles