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