Microsoft Edge中的border-bottom错误

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"...... May Edge很快,但渲染并不完美!

Answer 2

有同样的问题,并创建了一种黑客或解决这个错误.对我有用的是使用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;
}