chrome和firefox中的按钮元素的填充差异

Question

对于Firefox中的按钮元素，文本不在元素中居中，但在Chrome中似乎很好。我做错了什么？

CSS

.product_add {background:#f4af40; border:none; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; color:#fff; cursor:pointer; font-size:16px; padding:5px 20px;}

HTML

<input class="product_add" type="button" value="Add to Cart"/>

Answer 1

不，填充物是不同的，左边的填充物（可能是FF）具有更多的底部填充物。事实上，文本在元素的中间甚至看不到我。不确定是什么导致它。

Answer 2

您可以将input转换为button并将-moz-focus-inner用于Firefox。

.button::-moz-focus-inner { border: 0; padding: 0; margin:0; }