css - 当轮廓样式为自动时，轮廓偏移不会在 Chrome/Windows 上应用

Question

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

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

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

问题是当轮廓样式为“自动”时，轮廓偏移不会应用到 Chrome/Windows 上。在 Chrome/Mac 上，这可以正常工作。

如果我将轮廓样式从“自动”更改为“实心”，轮廓偏移就可以了。

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

Answer 1

我发现了如何调整outline-offsetDIV 或 Chrome 中的其他元素。

默认outline-style: auto意味着浏览器可以选择样式，并且outline-offset在 Chrome 中不支持该样式。我们可以使用outline-offsetwith outline-style: solid。

div {
    outline-color: #068065;
    outline-style: solid;
    outline-offset: 4px;
    outline-width: 4px;
    
    border: 1px solid red;  /* for comparison */
}

<h1>Testing</h1>

<div>
Hello, world
</div>

Answer 2

编辑：

我想我找到了解决办法。

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

---

您正在使用速记，outline-*这将不起作用，您必须使用以下所有outline-功能：

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

希望能帮助到你！