CSS3 Firefox 边框半径剪辑答案

【问题标题】：CSS3 Firefox Border Radius ClipCSS3 Firefox 边框半径剪辑
【发布时间】：2015-06-27 11:51:06
【问题描述】：

我不知道为什么 Firefox 浏览器会在右上角添加 pixellete 边框半径。如果有人在我附上的图片中注意到它。

这只发生在 Firefox 浏览器中。有办法解决吗？

HTML：

<nav class=""id="menusystem">
    <ul><li class="active"><span><i class="fa fa-building-o"></i> Home</span></li>
        <li><span><i class="fa fa-calendar-o"></i> Book Now</span></li>
        <li><span><i class="fa fa-male"></i> Service Prices</span></li>
        <li><span><i class="fa fa-th"></i> Product Prices</span></li>
        <li><span><i class="fa fa-thumbs-o-up"></i> Our Testimonials</span></li>
        <li><span><i class="fa fa-group"></i> Our Events</span></li>
        <li><span><i class="fa fa-envelope-o"></i> Contact Us</span></li>
    </ul>
</nav>

CSS

nav {
    height:50px;
    box-sizing: border-box;
}

nav > ul {
    padding:0;
    margin:0;
}

nav > ul > li {
    display: block;
    float: left;
    height: 100%;
    line-height: 50px;
    text-align: center;
    width: 144.429px;
     background-color: rgb(128, 0, 128);
    border-color: rgb(255, 167, 252);
    color: rgb(255, 255, 255);
}

nav > ul > li:first-child {
    border-bottom-left-radius: 25px;
    border-top-left-radius: 25px;
}

nav > ul > li:last-child {
    border-bottom-right-radius: 25px;
    border-top-right-radius: 25px;
}

【问题讨论】：

我为您的来源制作了a fiddle，但我没有看到您描述的问题。您使用的是什么版本的浏览器和/或操作系统？
我无法重现您的问题。看一下firefox的webconsole，看看有没有错误。蓝色错误是 CSS 错误。也许您忘记了前缀或其他东西，但我在您的代码中没有看到问题
我也不太确定，如果我减小宽度它可以解决问题，有时当它变宽时，它会发生......奇怪！

标签： html css

【解决方案1】：

您可以使用此代码

nav {
            height: 50px;
            box-sizing: border-box;
            margin: 0 auto;
            width: 1012px;
        }
        nav > ul {
            padding:0;
            margin:0;
        }
        nav > ul > li {
            display: block;
            float: left;
            height: 100%;
            line-height: 50px;
            text-align: center;
            width: 144.429px;
             background-color: rgb(128, 0, 128);
            border-color: rgb(255, 167, 252);
            color: rgb(255, 255, 255);
        }
        nav > ul > li:first-child {
            border-bottom-left-radius: 25px;
            border-top-left-radius: 25px;
        }
        nav > ul > li:last-child {
            border-bottom-right-radius: 25px;
            border-top-right-radius: 25px;
        }

    <nav class=""id="menusystem">
        <ul><li class="active"><span><i class="fa fa-building-o"></i> Home</span></li>
            <li><span><i class="fa fa-calendar-o"></i> Book Now</span></li>
            <li><span><i class="fa fa-male"></i> Service Prices</span></li>
            <li><span><i class="fa fa-th"></i> Product Prices</span></li>
            <li><span><i class="fa fa-thumbs-o-up"></i> Our Testimonials</span></li>
            <li><span><i class="fa fa-group"></i> Our Events</span></li>
            <li><span><i class="fa fa-envelope-o"></i> Contact Us</span></li>
        </ul>
    </nav>

【讨论】：