如果大纲样式设置为＆＃34; solid＆＃34;则在Chrome上绘制的轮廓不正确。 （而不是＆＃34; auto＆＃34;）

Question

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

Answer 1

...将display：inline-block设置为您的链接，以便激活布局：）

测试：http://codepen.io/gcyrillus/pen/GFzrs

我在FF 21.0中看不到自动轮廓