Question

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

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

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

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

Answer 1

不幸的是，在Firefox基础css中，行高被设置为！important ... 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

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

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

Answer 4

如果你的输入和提交按钮是并排的，按下按钮大约低1px然后输入（看起来你的背景图像关闭），一个简单的：

display:inline-block;
vertical-align: top;

按钮上的

在FF＆amp; IE。

Answer 5

Line-height无法应用于替换内联元素（如按钮和输入）。这是相对于规范的正确行为。

有关详细信息，请参阅https://developer.mozilla.org/en/docs/Web/CSS/line-height。

Answer 6

使用Height代替Line-Height。这对我来说几乎适用于Windows7上的所有浏览器，但我还没有在OSX上测试它。

Answer 7

只需为包装表单元素指定所需的行高，并至少输入所有类型为输入字段=＆＃34; text＆＃34;在Firefox中将采用相同的行高。提交按钮似乎表现不同但是......

带输入字段的Firefox行高问题

7 个答案: