Контур, примененный к якору, содержащему изображение, имеет неверную высоту в Chrome - PullRequest
Новая
       44

Контур, примененный к якору, содержащему изображение, имеет неверную высоту в Chrome

3 голосов
/ 20 октября 2010

Для сайта, над которым я работаю, я хотел бы, чтобы пунктирные контуры отображались вокруг ссылок, когда они сфокусированы / наведены / активны.Я хотел бы, чтобы это происходило с текстовыми и графическими ссылками.

Проблема, с которой я столкнулся, заключается в том, что хотя мой код прекрасно работает в 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');

Есть ли лучший способ сделать это?

1 Ответ

4 голосов
/ 20 октября 2010

Вы должны установить ссылки как блоки для обтекания изображений, например 

a { display:inline-block; }

например.

...