HTML5，占位符，Webkit 中的行高答案

【问题标题】：HTML5, Placeholder, line-height in WebkitHTML5，占位符，Webkit 中的行高
【发布时间】：2011-06-26 07:20:37
【问题描述】：

我有一个输入字段：

<input type="text" placeholder="whatever">

带样式：

input {
    margin: 0;
    padding: 0 6px;
    font-size: 19px;
    line-height: 19px;
    height: 36px;
    width: 255px;
}

问题是 webkit CHROME 中占位符的 line-height 没有生效。因此输入字段中的文本以丑陋的方式对齐。其他人看到这个，现在如何解决它？

谢谢

【问题讨论】：

这和占位符有什么关系？
输入中的占位符文本未与行高 CSS 规则对齐。
看起来是 Chrome 的错误：stackoverflow.com/questions/4919680/…

标签： html css

【解决方案1】：

输入占位符似乎不喜欢像素行高值，但这会使其在输入中垂直居中：

::-webkit-input-placeholder { line-height: normal; }

【讨论】：

请添加一些澄清/解释

【解决方案2】：

查看您的标签，我假设您正在编写类似...

<input type="text" placeholder="whatever">

不幸的是，Chrome 在设置占位符样式时束缚了你的手，选择器看起来像这样......

input::-webkit-input-placeholder {}

您可以在Styling the HTML Placeholder 中找到样式选项、陷阱和支持的浏览器

【讨论】：

感谢您的帮助。然而它的独特之处。占位符应该隐式继承这些样式。

【解决方案3】：

看来删除你的 line-height 声明完全有效。它在 FF7、Chrome15 和 Safari 5.1 中对我有用。在 IE9 和 FF3.6 中看起来也不错，但在 IE8 中看起来不太好。

【讨论】：

这对我有用。但在某些情况下，您可能不想删除您的 line-height 输入，因此它可能不适用于所有人。
优秀。行高：正常；是我以前从未使用过的东西，但在这里很有意义。我会说占位符及其波动的选择器标准是一些不完美的代码的一个很好的借口，这些代码通过删除而不是添加来修复它:)
输入元素只在一行上操作 - line-height 不适用。

【解决方案4】：

我认为我不能完全复制您的问题，但也许您可以使用padding: 7px 6px; 解决它。这样做应该有望将您的顶部和底部填充设置为 7px，这与line-height 的工作非常相似。使用不同的大小（宽度/字体大小），您应该能够通过计算 (height - fontsize) / 2 来选择适当的填充，也许给或取一两个像素以达到完美。

【讨论】：