Firefox 边框半径渲染奇怪的宽效果答案

【问题标题】：Firefox border-radius rendering weird wide effectsFirefox 边框半径渲染奇怪的宽效果
【发布时间】：2014-04-30 10:35:50
【问题描述】：

在 Firefox 中使用边界半径时，我遇到了一些奇怪的副作用。打开以下 html 会在某些按钮边框上呈现一些三角形。在这里查看副作用：http://i.imgur.com/GyqiEL8.png（我没有足够的图像声誉）

代码是

<html>
    <head>
    </head>
    <body>
        <form>
            <input style="border-radius: 10px;" value="Continue" type="submit">
        </form>
    </body>
</html>

有人有什么想法吗？我正在使用 FF 28.0 谢谢

【问题讨论】：

我认为我们需要查看带有完整 CSS 的 JSfiddle，因为我怀疑您还有其他一些可能会影响它的属性。
@Paulie_D ：不确定 jsfiddle 是什么，但这是 html 原样，它显示了副作用。

标签： html css firefox

【解决方案1】：

这适用于所有浏览器：

CSS

.myButton {
    width: 180px;
    height: 48px;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    color: rgba(0,0,0,1);
    font: normal 11px/48px "Lucida Grande";
    border: 1px solid rgba(128,128,128,1);
    -webkit-border-radius: 67px;
    -moz-border-radius: 67px;
    border-radius: 67px;
    background-image: rgba(235,235,235,1);
    background-image: -webkit-linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
    background-image: -moz-linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
    background-image: -o-linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
    background-image: -ms-linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
    background-image: linear-gradient(top, #dbdbdb 0%,#d6d6d6 100%);
    -webkit-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    -moz-box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
    box-shadow: rgba(128,128,128,1) 0px 0px 0px 0px, inset rgba(255,255,255,1) 0px 0px 0px 0px;
}

HTML

<button type="button" class="myButton">Button</button>

【讨论】：

【解决方案2】：

肯定是浏览器问题。尝试更新或尝试执行以下故障排除步骤：https://support.mozilla.org/en-US/kb/websites-look-wrong-or-appear-differently

【讨论】：

虽然此链接可能会回答问题，但建议将链接中的重要部分复制到答案中，因为该链接可能会变为非活动状态。

【解决方案3】：

一些 Firefox 的主题/皮肤可以改变表单元素的默认行为，包括按钮。这可能是潜在的原因之一。可以通过以下方式解决：

-moz-appearance: none;
-webkit-appearance: none;

【讨论】：