Что происходит с контурами кнопок начальной загрузки?

Question

Это правило CSS в bootstrap.min приводит к появлению пунктирного контура на левом и нижнем краях кнопок в IE 11 (IMO выглядит ужасно, как какой-то графический сбой), но он не появляется вообще в Firefox или Chrome:

.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{
   outline:thin dotted;
   outline:5px auto -webkit-focus-ring-color;
   outline-offset:-2px
}

Почему контур указан 3 раза, и как IE обрабатывает его иначе, чем Chrome и Firefox?

Answer 1

К тому времени вы можете получить решение своего вопроса.

Я использовал приведенный ниже код, чтобы исправить проблемы со стилем IE10 и IE11. Это условные стили для IE. Это может быть полезно для будущих ссылок.

      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    button:focus{
        outline:1px dotted #ccc;
    }
}

Answer 2

Я просто должен был разобраться с этим материалом:/

У вас есть 2 разных свойства здесь: outline, а также outline-offset,

Для каждого свойства последнее значение, которое понимает браузер, - это то, что будет применено. Итак, для собственности outline, Chrome и Firefox понимают ценность 5px auto -webkit-focus-ring-color;, который идет после значения thin dotted, поэтому Chrome и Firefox применяют значение 5px auto -webkit-focus-ring-color к outline имущество. IE не понимает это значение, поэтому он применяет значение thin dotted,

IE не поддерживает контурное смещение, поэтому вы видите контур слева и снизу, но не остальное. Чтобы контур обрисовался вокруг, я добавил поле.