Widzę to zachowanie dla Chrome na Macu (jeszcze nie testowałem go na Windowsie). Ponadto, ponieważ ta praca dotyczy rozszerzenia chrome, mogę z łatwością uzyskać rozwiązanie odpowiednie tylko dla Chrome (na razie nie musi działać w różnych przeglądarkach).

Problem: przeglądarka wydaje się rysować „kontur” inaczej wokół elementów, w zależności od tego, czy styl konspektu jest „automatyczny”, czy nie.

Podczas rysowania konturu wokół tagu, który jest rodzicem „img”, dla czegoś takiego:

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

Jeśli styl konspektu to „auto”, kontur zostanie narysowany poprawnie. tj. Chrome bierze pod uwagę wymiary obrazu wewnętrznego, aby renderować kontur wokół znacznika. (patrz zielony kontur na zrzucie ekranu).

Jeśli styl konspektu jest „jednolity” lub jakikolwiek inny regularny styl, kontur jest rysowany tylko wokół znacznika zewnętrznego bez względu na wymiary wewnętrznego dziecka.

CSS, który stosuję, wygląda tak:

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

1) Czy istnieje sposób na naprawienie tego lub obejście tego problemu, tj. Czy przeglądarka poprawnie narysowała kontur dla „bryły” w stylu konspektu?

2) Gdzie powinienem przeczytać więcej na ten temat? Może jakieś nieformalne dokumenty lub dostęp do odpowiedniego kodu?