在Firefox和Chrome中需要覆盖行高:普通!重要

Question

所以我过去一周花费了很多时间,因为Chrome喜欢"最小化"线条高度以匹配表格上的字体.更具体地说,文本,密码和电子邮件输入.其中我试图很难覆盖.

我所说的"最小锁定"是指我的字体可以处理我制作的主题,它必须是40px.因此,为了看起来不错,行高应设置为28px.但是,我认为它被重写为41px.现在,我可以将线高调整到41px以上,它会影响风格,但不会少.

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

*天后*

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

*翻转桌子......对破碎的技术大哭...... TT ... buysNewComputerOpensBoxSetup!...再次翻转办公桌*

不是了!只有这次提交按钮正在做同样的事情.除了将按钮上的线高度"锁定"到字体之外.这完全搞砸了流量,看起来很奇怪.对于你们中的一些人来说可能不是什么大不了的事,但是,考虑一下因为它需要工作或我废弃并试一试.

---

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

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

(编辑:已删除链接 - 网站已改变意义.)

这个图像正是我正在寻找的.(请记住,这是在绘画中呈现的,而不是在浏览器中呈现)

---

这张图片就是Chrome所做的.这是非常可以接受的.

---

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

---

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

---

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

此外,我想有一个纯CSS/HTML解决方案.但是,如果不存在,将适用于javaScript.

Answer 1

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

\n\n

来自文章：

\n\n

\n

基本上，Firefox 将按钮上的行高设置为 \xe2\x80\x9cnormal\xe2\x80\x9d\n 并通过声明强制执行此决定!important。

\n\n

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

\n

\n\n

这肯定与我在 Firefox 中看到的问题有关。

\n\n

我唯一能想到的是创建一个 div 来保存“登录”文本，然后有一个隐藏的提交按钮，该按钮在按钮的单击事件上触发。

\n\n

这样您就可以保持表单整洁，并能够调整 div 直到您满意为止。

\n\n

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

\n