Firefox邊框半徑渲染效果怪異

Question

在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謝謝

Answer 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>

Answer 2

當然，這是瀏覽器問題。 嘗試更新或嘗試執行以下故障排除步驟： https : //support.mozilla.org/zh-CN/kb/websites-look-wrong-or-appear-differently

Answer 3

Firefox的某些主題/外觀可以更改表單元素（包括按鈕）的默認行為。 這可能是潛在原因之一。 可以解決：

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

Firefox邊框半徑渲染效果怪異

問題描述

3 個解決方案

解決方案1
0 2014-04-30 10:41:45

解決方案2
0 2014-04-30 10:54:25

解決方案3
0 2014-04-30 13:10:45

Firefox邊框半徑渲染效果怪異

問題描述

3 個解決方案

解決方案1 0 2014-04-30 10:41:45

解決方案2 0 2014-04-30 10:54:25

解決方案3 0 2014-04-30 13:10:45

解決方案1
0 2014-04-30 10:41:45

解決方案2
0 2014-04-30 10:54:25

解決方案3
0 2014-04-30 13:10:45