Firefox邊框半徑渲染奇怪的寬效果

我在Firefox中使用border-radius時有一些奇怪的副作用。打開以下html會在一些按鈕邊框上呈現一些三角形。見一面effetcs這裏：http://i.imgur.com/GyqiEL8.png（我沒有對圖像足夠的聲譽）Firefox邊框半徑渲染奇怪的寬效果

代碼

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

人有什麼想法？我使用FF 28.0 感謝

來源

2014-04-30 user1912184

我認爲我們需要看到一個帶有完整CSS的JSfiddle，因爲我懷疑你有一些可能影響它的其他屬性。 –

@Paulie_D：不確定jsfiddle是什麼，但這是html的樣子，它顯示了副作用。 – user1912184

這是工作的所有瀏覽器：

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>

來源

2014-04-30 10:41:45 Cosmos

可以肯定它是一個瀏覽器的問題。嘗試更新或嘗試執行這些問題排查步驟：https://support.mozilla.org/en-US/kb/websites-look-wrong-or-appear-differently

來源

2014-04-30 10:54:25 RichardN

儘管此鏈接可能會回答問題，但建議將鏈接中的重要部分複製到答案中，因爲鏈接可能變爲非活動狀態。 –

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

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

來源

2014-04-30 13:10:45 srdjans

Firefox邊框半徑渲染奇怪的寬效果

回答

相關問題