Firefox溢出bug与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;

火狐

Chrome 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不是强制性的，请将其删除。这将解决问题：）