Я вижу такое поведение для 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) Где я должен искать, чтобы узнать больше об этом? Может быть, какая-то неофициальная документация или доступ к соответствующему коду?
