50px边框半径在Firefox中看起来破解

我正在使用border-radius: 50px;来制作圆形边框。它完美地在Chrome和其他一些浏览器，但看起来破解在Firefox：50px边框半径在Firefox中看起来破解

Firefox screenshot

这是它的外观在Chrome：

Chrome screenshot

这里是我的代码：

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

来源

2014-07-15 Ann Ragg

1）你不需要边界半径设置为50％。您也可以将其设置为一个可笑的高数量，如500px。 2）这不仅仅是边界看起来不好。看看你的标志。在FF中很难辨认。这可能是你使用的反锯齿设置的问题吗？你是否使用图像的字符图标？ – Ideogram

一些渲染问题，我发现在2个月前发生同样的事情。 –

@Ideogram图标来自字体真棒。当我给半径50px –

如果你使用：字体 - 真棒

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

来源

2014-07-15 12:54:14 grzechu1201

谢谢you.but边界仍然相同 –

添加边框大小:) border：2px solid #fff; – grzechu1201

它存在于我的代码中。仍然一样:( –

50px边框半径在Firefox中看起来破解

回答

相关问题