Html Webkit 中的 HTML5、占位符、行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4982045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5, Placeholder, line-height in Webkit
提问by AnApprentice
I have an input field:
我有一个输入字段：
<input type="text" placeholder="whatever">
with styles:
与样式：
input {
margin: 0;
padding: 0 6px;
font-size: 19px;
line-height: 19px;
height: 36px;
width: 255px;
}
Problem is the line-height is not taking effect for the placeholder in webkit CHROME. so the text in the input field is aligned in an ugly way. Anyone else seen this and now how to fix it?
问题是行高对 webkit CHROME 中的占位符不起作用。所以输入字段中的文本以丑陋的方式对齐。其他人看到这个，现在如何解决它？
Thanks
谢谢
回答by Matt Born
Input placeholders don't seem to like pixel line-height values, but this will vertically centre it in the input:
输入占位符似乎不喜欢像素行高值，但这会使其在输入中垂直居中：
::-webkit-input-placeholder { line-height: normal; }
回答by methodofaction
Looking at your tags, I'm assuming you are writing something like...
查看您的标签，我假设您正在编写类似...
<input type="text" placeholder="whatever">
Unfortunately, Chrome ties your hands when it comes to styling the placeholder, the selector looks like this...
不幸的是，Chrome 在设置占位符样式时束缚了您的手，选择器看起来像这样......
input::-webkit-input-placeholder {}
You can find the styling options, gotchas and supported browsers in Styling the HTML Placeholder
您可以在样式化 HTML 占位符中找到样式选项、陷阱和支持的浏览器
回答by Steve Klein
It appears that removing your line-height declaration entirely works. It's worked for me in FF7, Chrome15 and Safari 5.1. Also looked good in IE9 and FF3.6 but does NOT look good in IE8.
似乎删除您的行高声明完全有效。它在 FF7、Chrome15 和 Safari 5.1 中对我有用。在 IE9 和 FF3.6 中看起来也不错，但在 IE8 中看起来不太好。
回答by nxasdf
I don't think I can fully replicate your problem, but perhaps you can fix it using padding: 7px 6px;.
Doing this should hopefully set your top and bottom padding to 7px which pretty much does a similar job as line-height. With different sizes (width/font-size) you should be able to choose the appropriate padding by calculating (height - fontsize) / 2perhaps give or take a pixel or two for perfection.
我认为我无法完全复制您的问题，但也许您可以使用padding: 7px 6px;. 这样做应该希望将您的顶部和底部填充设置为 7px，这与line-height. 对于不同的尺寸（宽度/字体大小），您应该能够通过计算(height - fontsize) / 2可能给出或采用一两个像素来选择合适的填充。
