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 {}

您可以在样式化HTML占位符中找到样式选项,陷阱和支持的浏览器

Answer 3

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