border-bottom bug in Microsoft Edge

Had the same problem. It appears if the height or width is dynamic and has not a rounded pixel size. As solution example: Change the height to 40px (or what else) and the hover effect works.

But Microsoft should really fix this "designbug" asap... May Edge is fast, but the rendering is not perfect!


Had the same issue and created kind of a hack or workaround this bug. What worked for me was to use margin-bottom: -1px; and border-bottom: 2px solid gray;

so mentioned example would look like:

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;
}