我在 Mac 上看到 Chrome 的这种行为（尚未在 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）我应该在哪里阅读更多关于此的信息？也许是一些非正式文档或访问相关代码？