带输入字段的Firefox行高问题

Question

我之前已经意识到这个问题,但我想它和现在的情况一样重要.

我发现Firefox对于无法更改的输入字段的默认行高为1.2.至少在OSX中,没有Windows,所以我无法在那里确认.

我做了一些实验和测试,没有办法改变Firefox的默认行高值.所有其他浏览器(好吧,我只是尝试使用Chrome和Safari)完全可以服从我的价值,但不是Firefox.

有没有人注意到这一点,如果是的话,你有没有找到解决方案来解决这个问题？

Answer 1

不幸的是,在Firefox基础css中,行高已经设置为!重要... http://hg.mozilla.org/mozilla-central/rev/b97aef275b5e

Answer 2

我总是将我的按钮设置为锚点,按钮,标签和提交的样式,以确保无论使用哪个元素,结果看起来都完全相同.

由于Firefox坚持使用!important声明line-height,我能够冷静地克服这个问题的唯一方法是强制所有其他供应商使用line-height: normal按钮,然后使用填充垂直居中文本:

/**
 * Consistently style buttons on anchors, buttons, labels, and submits
 */
.btn {
    .
    .
    .
    height: auto;        // ensure heights on inputs do not affect submit buttons
    line-height: normal; // all browsers use FF's ever unchanging value
    padding: .5em 1em;   // vertically center the text in the button
    .
    .
    .
}

这与输入类似.

Answer 3

据我所知，除非您更改字体大小，否则输入的行高不会改变 - 比行高将更改为与字体大小 + 4px 相同（我猜是 2 top 2 bot） 。

如果这对您的造型造成困扰，您可以使用顶部和底部填充来实现假的更大的行高效果。