Контур, примененный к якору, содержащему изображение, имеет неверную высоту в 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');

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

Ответы на вопрос(1)

Ваш ответ на вопрос