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

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

Проблема в том, что, хотя мой код отлично работает в Firefox и IE, в Chrome 7.0.517.41 пунктирная контур имеет ту же высоту, что и мой текст, а не высоту изображения.

Образец кода:

    BODY { font: 15px/1.5 sans-serif; } a:focus, a:hover, a:active { outline: 1px dotted #11aa22; }         

Это раздражает. В качестве обходного пути я использую javascript для применения classа для выделения якорей, содержащих изображения, и убедитесь, что контур якорей, содержащих изображения, применяется к якорю, а не к изображению:

• Нежелательная схема или рамка вокруг кнопки при нажатии
• Как удалить контур кнопки в Opera на фокусе

 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'); 

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

 a { display:inline-block; }