Outline-offset does not get applied on Chrome/ Windows when outline-style is auto

问题

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?

回答1:

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!

来源：https://stackoverflow.com/questions/17141865/outline-offset-does-not-get-applied-on-chrome-windows-when-outline-style-is-aut