Question

I have a series of input boxes that have some values in them. I fixed the vertical alignment problem with IE by adding a css property line-height to be the same as the height of the input box.

Problem: Now the line-height property cause the text cursor to be the height of the line-height property, and is not vertically centered in Chrome, but looks fine in IE.

How can this be fixed?

jsFiddle (withoutline-height): http://jsfiddle.net/vzRZU/2/

jsFiddle (withline-height): http://jsfiddle.net/vzRZU/3/

Answer 1

try this.

http://jsfiddle.net/vzRZU/5/