在Firefox和Linux中需要覆盖适合行高的Chrome：正常！重要

Question

所以我过去一周花费了很多时间，因为Chrome喜欢“最低限度地锁定”行高以匹配表单上的字体。更具体地说，文本，密码和电子邮件输入。其中我试图很难覆盖。

我所说的“最小锁定”是指我的字体适用于我制作的主题，它必须是40px。因此，为了看起来不错，行高应设置为28px。但是，我认为它被重写为41px。现在，我可以调整41px以上的行高，它会影响样式，但不会少。

我知道这是有效的，因为该网站的其余部分做得很好。我尝试了大量的解决方案，这些解决方案显然适用于Google搜索到的所有答案。因此，在压力最终征服了我之后，我决定放弃，让额外的空间消失。

*天后*

最后让它看起来与主题有点相关后我决定开始调试firefox。

*翻转办公桌......对破碎的技术大哭...... T.T ...购买NewComputerOpensBoxSetup！ ...再次翻转桌面*

不再！只有这次提交按钮正在做同样的事情。除了将按钮上的线高度“锁定”到字体之外。这完全搞砸了流量，看起来很奇怪。 对于一些可能不是什么大不了的人，但是，请考虑我强迫症，因为它需要工作或我废弃它并尝试全部。

---

我向你展示了这个例子。请使用firefox或chrome进入下面的网站，并将注意力转移到右上角的登录表单。 chrome中的文本和密码字段。和Firefox中的提交按钮。

如果您仍然输了，请随时使用检查员编辑登录表单css并尝试按照我的描述进行操作。

（编辑：已删除链接 - 网站已经改变了意义。）

这张图片正是我想要的。 （请记住，这是在绘画中呈现的，而不是在浏览器中呈现）

---

此图片就是Chrome所做的。这是非常可以接受的。

---

这张图片就是Firefox所做的。 Firefox碰巧在这里遇到了两个问题。按钮是不可接受的。

---

希望一些知识渊博的人能够对这个问题有所了解。 ......如果没有，至少我知道我的毛巾在哪里。

---

编辑：请记住它在整个主题中的因子为4。因此，一些样式必须设置为奇数来解决这个问题。你会看到我的意思。

另外，我想要一个纯CSS / HTML解决方案。但是，如果不存在，将会解决javaScript问题。

Answer 1

我发现了这个： http://www.cssnewbie.com/input-button-line-height-bug/#.UwdzJfl_soI

来自文章：

  

基本上，Firefox正在按钮上将行高设置为“正常”   并使用!important声明强制执行此决定。

     

在尝试解决这条规则时，我发现了一些东西   使情况更加可怕：浏览器定义！重要   规则不能被作者定义的重要规则所超越。这个   规则不能被CSS文件推翻，内联样式 - 任何东西。

这与我在Firefox中看到的问题无关。

我唯一能想到的是创建一个div而不是保持“登录”文本，然后有一个隐藏的提交按钮，该按钮会在按钮的点击事件中触发。

这样你就可以保持你的形式整洁，并且能够调整div，直到你对它感到满意为止。

编辑：以下是带有示例的jsFiddle：http://jsfiddle.net/F74rf/