html5 line height,HTML5, Placeholder, line-height in Webkit

问题

I have an input field:

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?

Thanks

回答1:

Looking at your tags, I'm assuming you are writing something like...

Unfortunately, Chrome ties your hands when it comes to styling the placeholder, the selector looks like this...

input::-webkit-input-placeholder {}

You can find the styling options, gotchas and supported browsers in Styling the HTML Placeholder

回答2:

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

回答3:

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.

回答4:

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) / 2 perhaps give or take a pixel or two for perfection.

来源：https://stackoverflow.com/questions/4982045/html5-placeholder-line-height-in-webkit