在 Chrome 浏览器 Windows 上，当轮廓样式为自动时，轮廓偏移不会被应用。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在 Chrome 浏览器 Windows 上，当轮廓样式为自动时，轮廓偏移不会被应用。相关的知识，希望对你有一定的参考价值。
我正在对焦点元素应用一种风格，其行文如下。
.<class-name>:focus {
outline: 4px auto #068065 !important;
outline-offset: 2px !important;
}
(这是Chrome浏览器扩展代码的一部分，所以不需要跨浏览器)。
问题是，当outline-offset在ChromeWindows上的outline-style为 "auto "时，outline-offset不会被应用。在 ChromeMac 上，这可以正常工作。
如果我将 outline-style 从 "auto "改为 "solid"，outline-offset 就会正常工作。
我希望能够同时使用 "自动 "样式和轮廓偏移。有什么想法或建议吗？
我发现了如何在我的网站上添加 outline-offset 的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>EDIT:
我想我找到了一个解决办法
尝试添加 display: inline-block 到你应用轮廓的元素上。
您正在使用的速记为 outline-* 这将不会工作，你必须使用所有的。outline-这样的功能。
outline-color: #068065;
outline-style: auto;
outline-offset: 2px !important;
outline-width: 4px;
希望能帮到你！
以上是关于在 Chrome 浏览器 Windows 上，当轮廓样式为自动时，轮廓偏移不会被应用。的主要内容，如果未能解决你的问题，请参考以下文章
Google webfonts 在 Windows 上的 Chrome 中呈现断断续续
WINdows10/Chrome 中的 Jquery 自动完成功能
Android 模拟器中 Chrome 浏览器的故障 [Windows 11 Visual Studio 2022]