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

【问题标题】：padding difference within chrome and firefox for button elementchrome和firefox中按钮元素的填充差异
【发布时间】：2014-12-08 05:43:19
【问题描述】：

对于 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"/>

【问题讨论】：

两种情况下的字体一样吗？
对我来说，提供的 HTML / CSS 在 Firefox 和 Chrome 中看起来都很好并且相同。这里是否缺少其他样式？
@misterManSam 是我还是这两种字体看起来有点不同？
@Dim13i - 看起来是这样，但对我来说，它看起来是相同的字体，但字体粗细不同。可能只是眼睛的把戏！
@misterManSam 完全正确。也许这就是他得到两个不同结果的原因。

标签： css google-chrome firefox

【解决方案1】：

不，填充不同，左边的（大概是 FF）有更多的底部填充。事实上，文本甚至没有出现在元素的中间。不知道是什么原因造成的。

【讨论】：

【解决方案2】：

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

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

【讨论】：