在悬停元素border-bottom后的Microsoft Edge浏览器中设置底部元素的颜色。错误?看看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>
答案 0 :(得分:5)
有同样的问题。如果高度或宽度是动态的并且没有圆角像素大小,则会出现。作为解决方案示例:将高度更改为40px(或其他)并且悬停效果有效。
但微软应该真正解决这个问题&#34; designbug&#34; asap ... May Edge很快,但渲染并不完美!
答案 1 :(得分:5)
有同样的问题,并创建了一种黑客或解决这个错误。对我有用的是使用select t2.id,t2.labref,
case when t2.activity in ('read','write') Then t2.activity ='write'
when t2.activity ='read' then t2.date =null
end as activity,
max(t2.date)
from table1 t1
inner join table2 t2 on t1.id = t2.id
group by t2.labref
和margin-bottom: -1px;
所提到的例子看起来像:
border-bottom: 2px solid gray;
答案 2 :(得分:0)
另一种解决方案是使用a{top: 0; position: relative;}
。它对我有用。