I see this behavior for Chrome on a Mac (not tested it on Windows yet). Also, since this work is for the chrome extension, I am fine with a solution that is only related to Chrome (at the moment, I don’t need to work with a cross browser).
Question: It seems that the browser draws the “outline” differently around the elements, depending on whether the outline style is “auto” or not.
When drawing an outline around a tag that is the parent element of "img", for something like this:
<a href="image.com">
<img class="profile_photo_img" src="imageSrc.jpeg" width="50" alt="Steve Jobs" height="50">
</a>
- If the outline style is "auto", the outline is drawn correctly. those. Chrome takes into account the dimensions of the internal image to render the outline around the tag. (see the green outline in the screenshot).
- If the outline style is "solid" or any other ordinary style, the outline is drawn only around the outer tag, not taking into account the size of the inner child.
The CSS I apply is as follows:
.class-name:focus {
outline: 4px auto #068065 !important;
outline-offset: 2px !important;
}
1) Is there a way to fix this or get around this, i.e. make the browser draw the outline correctly for a solid outline style?
2) Where should I look to find out more about this? Maybe some unofficial documentation or access to the appropriate code?
source
share