Question

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

Jsfiddle here。

通常的修复;

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);


    }

Answer 1

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

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

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

Answer 2

我通过使用css前缀定位moz找到了修复方法。这不是理想的但它有效，我需要转移到其他事情而不是担心按钮！无论如何它在这里。

@-moz-document url-prefix(){
                           .buttonBlue 
                             { padding:0px 7px 0px 4px !important;} 
                            }

Moz填充在按钮上表现不同

2 个答案: