按钮高度不一致（跨浏览器）

Question

我在设置按钮高度时遇到了问题。基本上，我无法让它跨浏览器。在Firefox中，它比正常情况下要高，没有任何原因。

这是一个屏幕截图（按此顺序为Firefox、Safari和Opera）：

这是代码：http://jsfiddle.net/TMUnS/2/

我还尝试添加一些在网上找到的特定声明，但实际上它们只稍微减小了高度，但仍然不同（按照相同的顺序）：

这是代码：http://jsfiddle.net/TMUnS/4/。

我该如何解决这个问题？

- entropid

---

这种情况经常发生，这个问题已经被无数次提出。由于浏览器的不一致性，输入和像素完美往往不能很好地混合在一起。我建议你从类似于normalize.css的东西开始，然后再进行调整。 - elclanrs

我已经有一个重置，但它似乎不能重置这些东西。 - entropid

Answer 1

火狐浏览器有一个叫做-moz-focus-inner的有趣东西。我不完全确定它的作用是什么，但我知道有时需要这样做才能使按钮正常工作：

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner {
    padding:0;
    border:0;
}

这可能是你需要的。你可以在这里看到它们之间的差异（在Firefox中）：http://jsfiddle.net/TMUnS/9/

- Wesley Murch

---

其实我已经设置了这个属性，但是我忘记添加 padding: 0 部分，所以它没有正常工作！但现在我有一个新问题，在这里可以看到：http://jsfiddle.net/TMUnS/12/。按钮具有相同的高度，但在 Firefox 中垂直不正确。 - entropid

我没有很清楚地看到你的问题。需要注意的几点是：1）你刚刚提供的演示中没有包含“-moz-focus-inner”代码；2）你没有指定“font-family”。在Chrome和Firefox中，我得到了不同的默认字体，因此会有不同的渲染效果。3）<button>通常比<input>更容易进行样式设置（并且可以包含HTML），如果可能的话，建议使用它。 - Wesley Murch

我猜这取决于个人喜好。谢谢你的提示。 :) - entropid

Answer 2

这是Firefox中的一个功能集，用于限制按钮的行高。它为按钮设置了默认行高 - http://www.cssnewbie.com/input-button-line-height-bug/。我建议尝试使用固定高度的按钮，并调整填充量以达到最佳效果。

- Sagar Patil

---

是的，这是你能做到的最好的。固定高度和相同的行高来垂直居中文本。我已经在搜索按钮上使用了这种技术，这些按钮与文本输入框相接触，因此在所有浏览器中保持一致非常重要。 - elclanrs

Answer 3

你是否正在使用CSS重置？ CSS重置可以使浏览器的CSS标准化。

尝试使用YUI重置： YUI CSS RESET

- thisisablock