css - 如果 outline-style 设置为 "solid"(而不是 "auto")，则 Chrome 上的轮廓绘制不正确

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>

• 如果 outline-style 为“auto”，则轮廓绘制正确。即 Chrome 会考虑内部图像的尺寸来呈现标签周围的轮廓。 (请参阅屏幕截图中的绿色轮廓)。

• 如果 outline-style 是“solid”或任何其他常规样式，则仅围绕外部标签绘制轮廓，而忽略内部子标签的尺寸。

我正在应用的 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 中看不到自动轮廓