Webkit中的HTML5，占位符，行高

Question

我有一个输入字段：

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

有样式：

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

问题是webkit CHROME中占位符的行高没有生效。所以输入字段中的文本以丑陋的方式对齐。其他人看过这个以及现在如何解决它？

由于

Answer 1

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

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

Answer 2

看着你的标签，我假设你正在写一些像......

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

不幸的是，在设置占位符样式时，Chrome会将您的双手绑在一起，选择器看起来像这样......

input::-webkit-input-placeholder {}

您可以在Styling the HTML Placeholder

中找到样式选项，陷阱和支持的浏览器

Answer 3

看来删除行高声明完全有效。它适用于FF7，Chrome15和Safari 5.1。在IE9和FF3.6中看起来也不错，但在IE8中看起来不太好。

Answer 4

我认为我无法完全复制您的问题，但也许您可以使用padding: 7px 6px;进行修复。 这样做应该有希望将你的顶部和底部填充设置为7px，这与line-height几乎相同。使用不同的大小（宽度/字体大小），您应该能够通过计算(height - fontsize) / 2来选择合适的填充，或者给予或取一个或两个完美的像素。