当大纲样式为自动时，大纲偏移不会应用于 Chrome/Windows

Question

我正在将样式应用于以下行上的焦点元素：

.<class-name>:focus {
  outline: 4px auto #068065 !important;
  outline-offset: 2px !important;
}

（这是 Chrome 扩展代码的一部分，因此不需要跨浏览器）。

问题是当大纲样式为“自动”时，大纲偏移不会应用于 Chrome/Windows。在 Chrome/Mac 上，这很好用。

如果我将轮廓样式从“自动”更改为“实体”，轮廓偏移就可以正常工作。

我希望能够同时使用“自动”样式和轮廓偏移。有什么想法或建议吗？

Answer 1

编辑：

我想我找到了解决办法。

尝试添加display: inline-block到您应用大纲的元素。那应该有效

您使用的简写是outline-*行不通的，您必须使用outline-如下所示的所有函数：

outline-color: #068065;
outline-style: auto;
outline-offset: 2px !important;
outline-width: 4px;

希望能帮助到你！