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

对于<button>和明显<input>按钮，Firefox似乎有特殊需求。试试这一点仅限mozilla的CSS：

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

我记得很久以前被困在这一周，而#css IRC中的某个人向我展示了这个技巧，它似乎规范了填充。

演示：http://jsfiddle.net/AWcYG/1/（在FF3,4和5中测试过，希望也能在6中工作）

设置为按钮的链接高度不一致

1 个答案: