Ссылка на изображение в Chrome

Question

Мне сложно исследовать эту проблему, так как я точно не знаю, как называется ячейка вокруг ссылки на изображение.

У меня есть этот простой, базовый код в текстовый виджет на WordPress сайте:

<a href="https://www.facebook.com/ShiversShavedIce"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/facebook.png" title="Shivers Shaved Ice on Facebook" /></a> 
<a href="http://twitter.com/shiverstexas"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/twitter.png" title="Shivers Shaved Ice on Twitter" /></a> 
<a href="http://instagram.com/shiverstexas"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/instagram.png" title="Shivers Shaved Ice on Instagram" /></a> 
<a href="http://visitor.r20.constantcontact.com/d.jsp?llr=sn7abbnab&p=oi&m=1113504903602&sit=8kb6nh8hb&f=37e341e0-2a18-443e-9467-cedf64a6e113"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/newsletter.png" title="Keep Up With Us!" /></a> 
<a href="mailto:shiverstexas@gmail.com"><img src="http://shiversshavedice.com/wp-content/uploads/2015/01/email.png" title="Email Shivers" /></a> 

В Firefox это работает отлично. Когда вы щелкаете по одной из ссылок, вокруг изображений появляется своего рода марш-муравьиный тип, только муравьи не маршируют.

Но в Chrome, что ссылка окно штуковина появляется под ссылкой изображения:

Я на макинтоше, первый экран крышка шахты, вторая клиент на ПК. Похоже, это будет какая-то проблема с плавающей точкой? Но это очень простая тема WordPress, которая не была настроена так сильно. Я думаю, что ссылки все еще отлично работают в ситуации Chrome, но окно, отображаемое внизу, выглядит не очень красиво и немного отвлекает.

Спасибо, я знаю, что это, наверное, супер базовый, я просто немного потерян.

Answer 1

Одиночный пиксель с широким серым контуром - это стили по умолчанию :focus в браузере. Вы можете исправить компоновку контура, используя display: inline-block; в тегах a. Это сделает их макет развернут, чтобы обернуть элементы img.

Хотя не самый точный селектор CSS, вы можете сделать что-то подобное.

.widget-area .textwidget a { 
    display: inline-block; 
} 

Кроме того, вы можете настроить стили контура, используя CSS, как это.

.widget-area .textwidget a:focus { 
    outline: 0 none; 
    /*Some other styles here.*/ 
}