相关疑难解决方法(0)

我在 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）我应该在哪里阅读更多关于这个的信息？也许是一些非正式的文档或对相关代码的访问？