大纲样式为自动时，轮廓偏移不会应用于Chrome / Windows [英] Outline-offset does not get applied on Chrome/ Windows when outline-style is auto

问题描述

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

 。< class-name> ：focus {
 outline：4px auto＃068065！important; 
 outline-offset：2px！important; 
} 
  

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

问题是，当大纲样式为auto时，outline / offset不会应用于Chrome / Windows。在Chrome / Mac上，这项工作正常。

如果我将大纲样式从auto更改为solid，outline-offset的效果很好。

我想要同时使用自动样式和大纲偏移。任何想法或建议？

解决方案

编辑：

我想我找到了一个修复。 / p>

尝试将显示：inline-block 添加到要应用轮廓的元素。

$ <$>
>这不会工作，你必须使用所有 outline - 函数，如下所示：

  outline-color：＃068065; 
 outline-style：auto; 
 outline-offset：2px！important; 
 outline-width：4px; 
  

希望它有帮助！

I am applying a style to the focused element that is on the lines of:

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

(This is part of a Chrome extension code, so it does not need to be cross-browser).

The issue is that the outline-offset does not get applied on Chrome/Windows when the outline-style is "auto". On Chrome/Mac, this works fine.

If I change the outline-style from "auto" to "solid", the outline-offset works just fine.

I would like to be able to use both the "auto" style and the outline offset. Any thoughts or suggestions?

解决方案

EDIT:

I guess I found a fix.

try adding display: inline-block to the element where you apply your outline on. that should work

---

You are using the shorthand for outline-* this will not work you have to use all the outline-functions like this:

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

Hope it helps!

这篇关于大纲样式为自动时，轮廓偏移不会应用于Chrome / Windows的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！