Microsoft Edge 中的底部边框错误

Question

在 Microsoft Edge 浏览器中，悬停元素 border-bottom 后设置底部元素的颜色。漏洞？看看 jsfiddle： https://jsfiddle.net/Experimenter/65eLh89r/

a{
    display: block;
    background: blue;
    padding: 10px 30px;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid gray;
}
a:hover{
    color: white;
}

<ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">0</a></li>
</ul>

Answer 1

有同样的问题。如果高度或宽度是动态的并且没有四舍五入的像素大小，它就会出现。作为解决方案示例：将高度更改为 40px（或其他）并且悬停效果有效。

但微软真的应该尽快解决这个问题 "designbug"...可能 Edge 速度很快，但渲染并不完美！

Answer 2

遇到了同样的问题并创建了一种 hack 或解决此错误的方法。对我有用的是使用 margin-bottom: -1px; 和 border-bottom: 2px solid gray;

所以提到的例子看起来像：

a{
    display: block;
    background: blue;
    padding: 10px 30px;
    color: rgba(255, 255, 255, 0.5);
    border-bottom: 2px solid gray;
    margin-bottom: -1px;
}
a:hover{
    color: white;
}

Answer 3

另一个解决方案是使用 a{top: 0; position: relative;}。它对我有用。

Microsoft Edge 中的底部边框错误

border-bottom bug in Microsoft Edge

css

microsoft-edge