Firefox 输入字段的行高问题答案

【问题标题】：Firefox line-height issue with input fieldsFirefox 输入字段的行高问题
【发布时间】：2011-04-08 17:01:51
【问题描述】：

我之前也意识到了这个问题，但我想当时并没有现在那么重要。

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

我做了一些试验和测试，但无法更改 Firefox 的默认行高值。所有其他浏览器（好吧，我刚刚尝试过使用 Chrome 和 Safari）完全符合我的价值观，但 Firefox 则不然。

有没有人注意到这一点，如果有，你有没有找到解决这个问题的方法？

【问题讨论】：

哦，我需要提一下，我只确认了16px字体大小。它很可能因不同的字体大小而异。大概吧。
好的，找到答案了：cssnewbie.com/input-button-line-height-bug
这也是相关的stackoverflow.com/questions/7229568/…
"它很可能因不同的字体大小而异。"不幸的是，它也因浏览器和字体而异。 meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal
任何遇到这个问题的人都应该表达他们对这两个错误报告的支持bugzilla.mozilla.org/show_bug.cgi?id=349259 bugzilla.mozilla.org/show_bug.cgi?id=697451

标签： css firefox

【解决方案1】：

Line-height 不能应用于替换的内联元素，例如按钮和输入。这是相对于规范的正确行为。

【讨论】：

【解决方案2】：

只需为包装表单元素提供所需的行高，至少 Firefox 中所有 type="text" 的输入字段都将采用相同的行高。不过，提交按钮的行为似乎有所不同...

【讨论】：

【解决方案3】：

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

由于 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
    .
    .
    .
}

这同样适用于输入。

【讨论】：

【解决方案4】：

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

【讨论】：

垂直对齐：中间；使用此技术时，不适用于 Chrome 30 (OS X)。
避免它的最佳方法是使用“填充”，它适用于所有浏览器，包括 IE 7-8-9、FF、Chrome、Windows 7-8 上的 Safari

【解决方案5】：

不幸的是，在 Firefox 基础 css 中 line-height 设置为 !important ... http://hg.mozilla.org/mozilla-central/rev/b97aef275b5e

【讨论】：

很好的发现。救了我另一个头撞到墙上:) +1
我的上帝...这将永远无法修复。
'!important is anti-pattern in css'的完美示例

【解决方案6】：

如果您的输入和提交按钮并排，按钮向下约 1px，然后输入（看起来您的背景图像已关闭），很简单：

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

在按钮上，它在 FF 和 IE 中完美排列。

【讨论】：

【解决方案7】：

据我所知，输入的 line-height 不会改变，除非您更改 font-size - 而 line-height 将更改为与 font-size + 4px (2 top 2 bot我猜）。

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

【讨论】：

看，就是这样——当你不指定行高而只使用填充时，它在其他浏览器上看起来会完全不同。至少在 OSX 上的 webkit 浏览器中。
是的，它可以乱七八糟。我根本不建议对输入字段进行样式设置并保留默认行为（您也很难混淆用户将其保留为默认行为），如果添加此功能不会带来太多金钱收益，也不值得浪费宝贵的时间。
您可以采取的另一种方法是从输入中删除所有样式并使其透明，而不是使用包装 div 和背景图像来设置外观 - 我经常在图形密集型设计和用户中使用这种技术几乎不会注意到行高。