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

Question

我有一个样式按钮和一个样式链接(以匹配按钮的样式)。我在Chrome 13、Firefox 6和IE 9中测试了它。按钮和链接在这三种浏览器中看起来都一样，只是在Firefox中链接的高度更短。http://jsfiddle.net/AWcYG/

我不能在链接上应用高度，因为它不是块级元素。如果我把它做成块级元素，我就必须让两个元素都浮动起来，让它们挨着彼此对齐。此外，高度在所有三种浏览器中都是关闭的。我想过绝对定位，但后来我觉得没有办法让他们彼此靠近，除非我硬编码他们的位置。

除了使用条件语句，有没有办法使按钮和链接的高度匹配在所有三个浏览器?也许是我不知道的黑客，或者我遗漏了什么?

更新:

@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给我看了这个技巧，它似乎使padding正常化。

演示:http://jsfiddle.net/AWcYG/1/(测试在FF3, 4和5，希望在6也工作)