当outline-style为auto时，Outline-offset不适用于Chrome/ Windows

Question

我正在将一种样式应用于聚焦元素，其内容如下：

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

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

问题是，当轮廓样式为"auto“时，轮廓偏移不会应用于Chrome/Windows。在Chrome/Mac上，这工作得很好。

如果我将outline-style从"auto“更改为"solid"，那么outline-offset就能正常工作。

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

Answer 1

我发现了如何在DIV或其他Chrome元素上添加outline-offset。

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

​

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;

希望它能帮上忙！