Я наблюдаю такое поведение для Chrome на Macпока не проверял его на Windows). Кроме того, поскольку эта работа предназначена для расширения Chrome, я согласен с получением решения, релевантного только для Chrome (на данный момент не нужно работать в кросс-браузерной среде).

Проблема: браузер, похоже, рисуетконтур" по-разному вокруг элементов в зависимости от того, является ли стиль контура "авто" или нет.

При рисовании контура вокруг тега, который является родителемIMG»для чего-то вроде этого:

 <a href="image.com">
   <img class="profile_photo_img" src="imageSrc.jpeg" width="50" alt="Steve Jobs" height="50">
 </a>

Если стиль контура "авто", контур нарисован правильно. то есть Chrome учитывает размеры внутреннего изображения, чтобы отобразить контур вокруг тега. (см. зеленый контур на скриншоте).

Если стиль контура "твердый» или любой другой обычный стиль, контур рисуется только вокруг внешнего тега, независимо от размеров внутреннего потомка.

CSS, который я применяю, выглядит следующим образом:

.class-name:focus {
   outline: 4px auto #068065 !important;
   outline-offset: 2px !important;
 }

1) Есть ли способ исправить это или обойти это, то есть сделать так, чтобы браузер правильно рисовал контур для стиля контура? "твердый» также?

2) Куда мне обратиться, чтобы узнать больше об этом? Может быть, какая-то неофициальная документация или доступ к соответствующему коду?