Question

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
}

为什么大纲指定了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 1}}属性。 IE不理解该值，因此它应用值thin dotted。

IE does not support轮廓偏移，这就是为什么你会看到左边和右边的轮廓，而不是其余部分。为了让轮廓显示在周围，我添加了一个边距。

引导按钮轮廓发生了什么？

2 个答案: