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

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

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

：焦点{
概述：4px自动#068065！重要；
轮廓偏移：2px！重要；
}

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

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

如果我将轮廓样式从“自动”更改为“实体”，则轮廓偏移效果很好

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

编辑：

我想我找到了解决办法

尝试将

display:inline block

添加到应用大纲的元素中。这应该行得通

---

您使用的是

outline-*

的速记法，这不起作用。您必须使用所有

outline-

函数，如下所示：

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

---

希望有帮助

我找到了如何调整Chrome中DIV或其他元素的

轮廓偏移量

默认的
轮廓样式：auto
意味着浏览器可以选择该样式，而
轮廓偏移量
在Chrome中不适用于该样式。我们可以将
轮廓偏移量
与
轮廓样式：实心
一起使用


div{
轮廓颜色：#068065；
轮廓样式：实心；
轮廓偏移量：4px；
轮廓宽度：4px；
边框：1px纯红；/*用于比较*/
}
测试
你好，世界
尝试了此操作，但仍然看到问题。只要样式为“自动”，偏移似乎就不适用；在IE中什么都不做，但它应该在chrome中工作。将轮廓样式置于轮廓偏移下方。那行吗？你试过把样式放在偏移量后面吗。不起作用。是的，注意到轮廓样式的自动在IE上不起作用。目前只在Chrome上需要它。我在google上搜索了这个问题，但没有找到什么。如果问题没有解决，就使用边界。是的，这是一个奇怪的怪癖。我希望进入SO社区会有所帮助：）不要认为border会有帮助，我不知道如何为border添加偏移量。此外，边框会占用空间（与轮廓不同），这在本例中是不可取的。谢谢你的帮助。