css - Bootstrap 按钮轮廓是怎么回事？

Question

bootstrap.min 中的这个 CSS 规则导致在 IE 11 中按钮的左侧和底部边缘出现虚线轮廓(IMO 看起来很糟糕，就像某种图形故障)，但它根本没有出现在 IE 11 中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
}

为什么 outline 指定了 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;
    }
}