Я наблюдаю такое поведение для 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) Есть ли способ исправить это или обойти это, то есть браузер должен правильно рисовать контур и для стиля "solid"?

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