css - 使用 CSS 制作看起来一样

Question

我想让 <button> 和 <a> 看起来一样。我发现了一个类似的帖子，建议添加

box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;

但是，在 Firefox 中查看时，它仍然有轻微的高度差异。这是jsfiddle。有什么帮助吗？

Answer 1

http://jsfiddle.net/H3HK8/22/

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

这修复了中间那个，仍在处理最终输入。

从这里http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox/

更新

我怀疑最后一个例子你是这个http://www.cssnewbie.com/input-button-line-height-bug/#.USzRd6Wcmzc的受害者

您可以在此示例http://jsfiddle.net/H3HK8/24/中看到行高没有影响，即使添加了 !important。

在尝试解决这个规则时，我发现了一些让情况变得更可怕的东西：浏览器定义的 !important 规则不能被作者定义的 !important 规则所推翻。这条规则不能被 CSS 文件、内联样式——任何东西推翻。

Answer 2

您应该确保所有 CSS 属性都相同。所以不仅是 box-sizing（它本身并没有真正做任何事情），还有 padding、margin、line-height、font-size、background 等。