Смещение контура не применяется в Chrome/Windows, если стиль контура установлен автоматически.

Я применяю стиль к сфокусированному элементу, который находится в строках:

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

(Это часть кода расширения Chrome, поэтому он не обязательно должен быть кросс-браузерным).

Проблема в том, что смещение контура не применяется в Chrome/Windows, когда стиль контура установлен на «авто». В Chrome/Mac это работает нормально.

Если я изменю стиль контура с «авто» на «сплошной», смещение контура будет работать нормально.

Я хотел бы иметь возможность использовать как стиль «авто», так и смещение контура. Любые мысли или предложения?


windows google-chrome css outline
person tanushree    schedule 17.06.2013    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Я узнал, как настроить outline-offset в DIV или другом элементе в Chrome.

Значение по умолчанию 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>

person Sam Watkins    schedule 04.06.2020

arrow_upward
1
arrow_downward

РЕДАКТИРОВАТЬ:

Кажется, я нашел исправление.

попробуйте добавить display: inline-block к элементу, к которому вы применяете свой контур. это должно работать

Вы используете сокращение для outline-*, это не сработает, вам нужно использовать все outline-функции следующим образом:

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

Надеюсь, поможет!

person Kees Sonnema    schedule 17.06.2013
comment
Пробовал это, видя проблему все еще. Смещение, кажется, не применяется, пока стиль автоматический. - person tanushree; 17.06.2013
comment
обратите внимание, что стиль контура: авто; ничего не делает в IE, но должно работать в хроме. поместите стиль контура под смещением контура. это работает? - person Kees Sonnema; 17.06.2013
comment
Попробовал поставить стиль после смещения. Не работает. Да, в курсе, что auto в стиле контура не работает в IE. На данный момент это нужно только для Chrome. - person tanushree; 17.06.2013
comment
Искал проблему в гугле, но ничего не нашел. вместо этого используйте границу, если проблема не устранена. - person Kees Sonnema; 17.06.2013
comment
Да, странная фигня. Я надеюсь, что подключение к сообществу SO поможет :) Не думайте, что граница поможет, я не знаю, как добавить смещение к границе. Кроме того, граница занимает место (в отличие от контура), что в данном случае нежелательно. Спасибо за помощь. - person tanushree; 17.06.2013
comment
Столкнулся с другой связанной проблемой, размещенной здесь: stackoverflow.com/questions/17146707/ - person tanushree; 17.06.2013
comment
Да, я знаю. Я слышал об этой проблеме. Надеюсь, ты как-нибудь это исправишь. - person Kees Sonnema; 17.06.2013
comment
Даже если это исправит смещение контура, это не является жизнеспособным решением. Я работаю над расширением для браузера, которое изменяет стиль элемента, который фокусируется на табуляции. В этом сценарии изменение свойства отображения не имеет смысла. - person tanushree; 17.06.2013
comment
Ах, это дерьмо. Надеюсь, тогда ты найдешь другой путь. - person Kees Sonnema; 17.06.2013
comment
Наконец решил не использовать auto для стилизации контура. Это вызывало кучу проблем как на Windows, так и на Mac. Спасибо за помощь. - person tanushree; 20.06.2013
comment
Добро пожаловать :), вы все еще можете принять ответ. потому что я был единственным, кто ответил на этот вопрос. но это решать вам :) - person Kees Sonnema; 20.06.2013