用css背景和圓角邊界的Firefox溢出錯誤

我想設計一個帶有橙色背景和圓角邊框的按鈕，但問題是背景溢出。我無法在Chrome上看到任何問題。我使用overflow: hidden但沒有幫助。有什麼想法？用css背景和圓角邊界的Firefox溢出錯誤

下面是代碼：

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;

火狐 overflow problem

鉻http://f.cl.ly/items/1c280g3r121Z2i3d0803/Screen%20Shot%202012-02-14%20at%2012.27.51%20AM.png

來源

2012-02-13 goksel

你可能想在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放在最後。

來源

2012-02-14 18:59:35 robertc

謝謝羅伯特！有效。 – goksel 2012-02-15 10:25:49

感謝這也解決了IE中的相同問題 – 2012-06-13 00:50:08

如果box-shadow不是強制性的，將其刪除。這將解決這個問題:)

來源

2012-02-14 18:40:20 techfoobar

背景剪輯修復了問題的人，無論如何。 – goksel 2012-02-15 10:26:30

用css背景和圓角邊界的Firefox溢出錯誤

回答

相關問題