在Firefox中，50px边框半径看起来破裂了

Question

我正在使用border-radius: 50px;制作圆形边框。它在Chrome和其他一些浏览器中运行良好，但在Firefox中看起来很破旧：

这就是它在Chrome中的外观：

这是我的代码：

li {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    border: 2px solid #FFF;
    cursor: pointer;
    display: inline-block;
    height: 50px;
    margin: 0px 5px;
    width: 50px;
    transition: all 0.3s ease-in-out 0s;
    color: #FFF;
    line-height: 47px;
    font-size: 20px;
    border-radius: 50px;
}

fiddle

Answer 1

如果你使用：Font-Awesome

HTML：

<a href="#"><i class="fa fa-youtube"></i></a>

CSS：

body {background: #000;}
a {display:block; width: 50px; height:50px; border-radius:50%; color:#fff; border:1px solid #fff; text-align:center; line-height:50px;}
a i {font-size:25px; line-height: 50px;}

JS Fiddle Demo