0

在我所有的按钮上，填充在 Firefox 中的行为不同。从研究中我知道这是因为 FF 在默认样式表中有一些奇怪的设置，但我已将一般修复添加到我的样式表中。没关系，我可以忍受，除了一个按钮不适合 Firefox 的工具栏，因为填充使它太大。

Jsfiddle在这里。

常规修复；

input[type=button]::-moz-focus-inner{padding:0; border:0;}

删除了一些东西的按钮的 css；

.buttonBlue {background-color:#008abd; border-radius:0.2em; 
             font-family:inherit; 
             color:white; border: 1px solid black;
             cursor:pointer; 


             filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#008abd', endColorstr='#036b91');
             background: -webkit-gradient(linear, left top, left bottom, from(#008abd), to(#036b91));
             background: -moz-linear-gradient(top,  #008abd,  #036b91);


    }
4

2 回答 2

0

如果将元素的外观属性设置为无，任何表现良好的浏览器都会放弃其 gui 风格。
https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance

对于按钮，外观的默认值为“按钮”。明确地将其设置为“无”应该覆盖浏览器的内置平台原生样式，包括奇怪的填充。

Firefox 不是唯一对此属性做出反应的浏览器：Safari 和 Chrome 监听 -webkit-appearance 变体，而 Opera 监听 -o-appearance 变体。我不知道 MSIE9 或 10。

于 2012-08-14T21:37:40.173 回答
0

我通过使用 css 前缀定位 moz 找到了解决方法。这并不理想，但它有效，我需要转移到其他事情上，而不是担心一个按钮！反正就是这里。

@-moz-document url-prefix(){
                           .buttonBlue 
                             { padding:0px 7px 0px 4px !important;} 
                            }
于 2012-08-14T22:25:14.830 回答