样式为按钮的链接高度不一致

Question

我有一个样式按钮和一个样式链接（以匹配按钮的样式）。我正在 Chrome 13、Firefox 6 和 IE 9 中对其进行测试。按钮和链接在所有三种浏览器中看起来都相同，除了在 Firefox 中链接的高度更短。 http://jsfiddle.net/AWcYG/

我无法在链接上应用高度，因为它不是块级元素。如果我将其设为块级元素，我必须将两者都浮动以使它们彼此对齐。此外，所有三个浏览器中的高度都是关闭的。我考虑过绝对定位，但除非我对它们的位置进行硬编码，否则我没有办法让它们彼此相邻。

除了使用条件语句之外，还有什么方法可以使按钮和链接的高度在所有三种浏览器中都匹配？也许是我不知道的 hack，或者我遗漏了什么？

更新：

@Wesley 感谢您为我指明了这个方向。我发现 Firefox 在其按钮中添加了以下内容，这解释了为什么您的代码会这样做：

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    padding: 0px 2px 0px 2px;
    border: 1px dotted transparent;
    }

结果非常接近完美，但在 Firefox 6 中仍然相差 1px。如果我找到修复方法，我可能会对此进行更多研究并发布另一个更新，但即使只有 1px 关闭，它仍然比以前好得多！

更新 2：

我找到的解决方法是在按钮上指定高度：

.db .menu input,
.db .menu a {
    background-color: #01137F;
    border: 1px solid #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 3px #666;
    color: #fff;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 14px;
    height: 26px;
    padding: 4px 10px;
    }

在我所指的所有三个浏览器中，添加高度会使按钮与像素完全相同。

Answer 1

Firefox 似乎对<button> 和<input> 按钮有特殊需求。试试这个只有 mozilla 的 CSS：

.menu input::-moz-focus-inner {
    padding:0;
    border:0;
}

我记得很久以前被困在这个问题上一个星期，#css IRC 中的某个人向我展示了这个技巧，它似乎使填充正常化。

演示：http://jsfiddle.net/AWcYG/1/（在 FF3、4 和 5 中测试，希望在 6 中也可以）