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

【问题标题】：Outline-offset does not get applied on Chrome/ Windows when outline-style is auto当轮廓样式为自动时，轮廓偏移不会在 Chrome/Windows 上应用
【发布时间】：2013-06-13 01:45:19
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

标签： css windows google-chrome outline

【解决方案1】：

我发现了如何在 DIV 或 Chrome 中的其他元素上调整 outline-offset。

默认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>

【讨论】：

【解决方案2】：

编辑：

我想我找到了解决办法。

尝试将display: inline-block 添加到应用大纲的元素中。应该可以的

您正在使用outline-* 的简写，这将不起作用，您必须像这样使用所有outline-函数：

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

希望对你有帮助！

【讨论】：

试过了，问题依旧。只要样式为“自动”，偏移量似乎就不会适用。
注意outline-style: auto;在 IE 中什么都不做，但它应该在 chrome 中工作。将轮廓样式放在轮廓偏移下方。这行得通吗？
确实尝试将样式放在偏移量之后。不工作。是的，请注意大纲样式的自动在 IE 上不起作用。目前只有 Chrome 需要它。
我在 google 上搜索了问题，但找不到任何东西。如果问题没有解决，请改用边框。
是的，这是一个奇怪的怪癖。我希望利用 SO 社区会有所帮助 :) 不要认为边框会有所帮助，我不知道如何为边框添加偏移量。此外，边框占用空间（与轮廓不同），这在这种情况下是不可取的。感谢您的帮助。