如何在Chrome和Firefox中将按钮输入设置为相同？

Question

看一下Chrome和FireFox 中的这个JSFiddle示例.

在Chrome中,按钮应该比FireFox小一些.我已经在Firefox 4 +中添加了如何重置默认按钮样式的解决方案CSS (这使按钮变小了)但FireFox中的按钮仍然更大.在这个例子中差异不是很明显,但看看它如何影响我的设计.

铬:

火狐:

正如您所看到的,FireFox中的按钮较粗,并且正在影响布局.有没有办法避免使用样式的div代替按钮？

---

另外,我正在使用Meyer的CSS重置样式表

Answer 1

Firefox为inputs和button元素添加了一个特殊的填充.这照顾它:

button::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner {
  padding: 0 !important;
  border: 0 none !important;
}