Firefox上的按钮太高

我遇到了Firefox独有的问题。我试图链接和按钮样式正好相同。在除Firefox之外的每个浏览器上，这都可以按需使用。在Firefox中，按钮内容的高度为18像素，而链接的高度为15像素。在Chrome，Safari和Internet Explorer上，它们都是正确的15像素高。为什么是这样？Firefox上的按钮太高

Here's a demo on jsFiddle的问题。这里的结果我得到的铬：

Result on Chrome

，这里是Firefox的结果：

Result on Firefox

我试着在CSS手动更改的高度，但这并不完全工作并打破其他浏览器的布局。设置-moz-appearance: none什么都不做，但是再次，它通常不。

Here's a full detail of my attempt，以及它将用于什么。

有没有人遇到过这个问题？我如何均衡所有浏览器的高度？

来源

2012-01-14 Ryan

发现谁使用该另一个用户：

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
}

http://jsfiddle.net/MCAllinder/dehda/2/

来源

2012-01-14 03:49:55 mcallinder

完美。谢谢！ – Ryan 2012-01-14 03:51:37

我已经找到了一个完整的解决方案，并在这里写一下吧：

http://davidwalsh.name/firefox-buttons

input::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
    margin-top:-2px; 
    margin-bottom: -2px; 
}

您需要修改margin-top和margin-bottom以匹配您的其他按钮

来源

2013-05-16 14:54:03

如果你也可以在这里总结你的文章，那太棒了！不鼓励链接的答案。谢谢。然而，使用你的魔力边缘数字，按钮现在对我来说太短了4个像素 - 用于Linux和Windows的Firefox 20.0.1。 [这个小提琴]（http://jsfiddle.net/MCAllinder/dehda/2/）如何看待你？这是完美的，但如果你觉得它有点高，那么它可能是一个操作系统特定的东西:( – Ryan 2013-05-16 15:45:33

这些真的停留了太久。-1 – Ryan 2013-05-18 15:00:39

@minitech'margin-top' /'margin-bottom ''将依赖于任何其他你正在修改'input'的css，所以我不认为它是特定于操作系统的。在我的情况下，3px是魔术值。 – icc97 2013-08-07 13:27:33

Firefox上的按钮太高

回答

相关问题