Question

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

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

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

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

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

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

Answer 1

我发现了如何将outline-offset附加到Chrome中的DIV或其他元素上。

默认的outline-style: auto表示浏览器可以选择样式，而outline-offset在Chrome中无法使用该样式。我们可以将outline-offset与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;

希望它有所帮助！

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

2 个答案: