Ich sehe dieses Verhalten für Chrome auf einem Mac (habe es noch nicht unter Windows getestet). Da es sich bei dieser Arbeit um eine Chrome-Erweiterung handelt, kann ich auch eine Lösung finden, die nur für Chrome relevant ist (muss vorerst nicht browserübergreifend funktionieren).

Problem: Der Browser scheint den "Umriss" um Elemente unterschiedlich zu zeichnen, je nachdem, ob der Umrissstil "automatisch" ist oder nicht.

Wenn Sie einen Umriss um ein Tag zeichnen, das das übergeordnete Element eines "img" ist, geschieht Folgendes:

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

Wenn der Umrissstil "auto" ist, wird der Umriss korrekt gezeichnet. d.h. Chrome berücksichtigt die Abmessungen des inneren Bilds, um einen Umriss um das Tag zu rendern. (Siehe den grünen Umriss im Screenshot).

Wenn der Umrissstil "einfarbig" oder ein anderer regulärer Stil ist, wird der Umriss unabhängig von den Abmessungen des inneren untergeordneten Elements nur um das äußere Tag herum gezeichnet.

Das CSS, das ich anwende, sieht folgendermaßen aus:

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

1) Gibt es eine Möglichkeit, dies zu beheben oder dies zu umgehen, d. H. Den Browser den Umriss auch für den Umrissstil "Solid" korrekt zeichnen zu lassen?

2) Wo soll ich mehr darüber lesen? Vielleicht eine informelle Dokumentation oder Zugriff auf den relevanten Code?