html - 为什么IE对border-style应用不透明度: dotted?

Question

标题说明了一切，我刚刚发现 IE (9 - 11) 会自动将大约 50% 的不透明度应用到任何带有 border-style: dotted 的元素的边框。

最奇怪的是，它只发生在 dotted 上，特别是 solid 和 dashed 都可以。

大家可以自己测试:http://jsfiddle.net/ptv74f4q/1/

有什么想法吗？

Answer 1

这似乎是由于 IE 消除了虚线边框的锯齿。如果您使 border-width 大于 1px(例如 5px)，边框将再次显示为白色。

解决这个问题的一种方法是在顶部覆盖一些具有相同虚线边框的伪元素以抵消不透明度:

div {
    width: 200px;
    height: 200px;
    background: #000;
}
span {
    transform: rotate(0deg);
    display: inline-block;
    width: 180px;
    height: 85px;
    line-height: 85px;
    text-align: center;
    margin: 8px 8px 0 8px;
    border: #fff 1px solid;
    color: #fff;
    position: relative;
}
span.dotted {
    border-style: dotted;
}
span.dotted::before, span.dotted::after {    
    border: #fff 1px dotted;
    content: "";
    height: 100%;
    left: -1px;
    position: absolute;
    top: -1px;
    width: 100%;
}

<div>
    <span>I'm with normal border</span>
    <span class="dotted">I'm with dotted border</span>
</div>

JS fiddle : http://jsfiddle.net/oyrbLyjc/1/

替代方法

或者，您可以尝试使用 border-image。有在线工具(例如 https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-image_generator )可以帮助您使用此方法生成类似的边框。