用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溢出错误

回答

相关问题