css - Moz 填充在按钮上表现不同

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 并不是唯一对此属性使用react的浏览器:Safari 和 Chrome 监听 -webkit-appearance 变体，Opera 监听 -o-appearance 变体。我不知道 MSIE9 或 10。