引导按钮轮廓是怎么回事？答案

【问题标题】：What is going on with bootstrap button outlines?引导按钮轮廓是怎么回事？
【发布时间】：2016-02-10 06:25:01
【问题描述】：

bootstrap.min 中的这条 CSS 规则导致 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
}

为什么 outline 指定了 3 次，IE 处理它的方式与 Chrome 和 Firefox 有何不同？

【问题讨论】：

标签： css twitter-bootstrap cross-browser internet-explorer-11 outline

【解决方案1】：

到那时，您可能会得到问题的解决方案。

我使用下面的代码来修复我的 IE10 和 IE11 样式问题。这些是 IE 的条件样式。这可能对将来的参考有用。

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

【讨论】：

【解决方案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 does not supportoutline-offset，这就是为什么您在左侧和底部边缘看到轮廓但在其余部分看不到的原因。为了让轮廓显示在四周，我添加了一个边距。

【讨论】：