FirefoxオーバーフローバグCSSの背景と丸みのある境界

Question

オレンジ色の背景と丸みのある罫線のボタンを設計しようとしていますが、問題はバックグラウンドオーバーフローです。私はChromeで何か問題を見ることができません。

私はoverflow: hiddenを使用しましたが、助けがありませんでした。何か考えますか？ここで

コードです：

display: inline-block; 
padding: 8px 15px 6px; 
background: -moz-linear-gradient(top, #f8cc55, #ba701d); 
background: -webkit-linear-gradient(#f8cc55, #ba701d); 
background: -o-linear-gradient(#f8cc55, #ba701d); 
background: -ms-linear-gradient(#f8cc55, #ba701d); 
background: linear-gradient(#f8cc55, #ba701d); 
color: #1f2b20; 
text-shadow: 0 1px 0 #e3bf8b; 
font-size: 14px; 
border-radius: 15px; 
border: 3px solid #2e2e2e; 
box-shadow: 0 1px 0 #fff inset; 

Firefoxの

はクロームhttp://f.cl.ly/items/1c280g3r121Z2i3d0803/Screen%20Shot%202012-02-14%20at%2012.27.51%20AM.png

Answer 1

あなたはおそらくFirefoxのis background-clipで使用したいもの：

background: -moz-linear-gradient(top, #f8cc55, #ba701d); 
background: -webkit-linear-gradient(#f8cc55, #ba701d); 
background: -o-linear-gradient(#f8cc55, #ba701d); 
background: -ms-linear-gradient(#f8cc55, #ba701d); 
background: linear-gradient(#f8cc55, #ba701d); 
color: #1f2b20; 
text-shadow: 0 1px 0 #e3bf8b; 
font-size: 14px; 
border-radius: 15px; 
border: 3px solid #2e2e2e; 
box-shadow: 0 1px 0 #fff inset; 
background-clip: padding-box; 

Here's an example。 backgroundプロパティは、指定されていないサブプロパティの値をリセットするので、最後にbackground-clipと入力してください。

Answer 2

box-shadowは必須ではありません場合は、それを削除。それは問題を解決します:)