Crossbrowser Input Text Vertical Alignment

What is the best way to create input that will have the same rendering in Chrome, FF, IE8-11. I usually don't add height property for text inputs and i use padding-top/bottom + li

Solution 1:

I don't have IE so I couldn't observe your case however since your code seems also OK to me I thought that may the scope of your reset part should be higher.

Please refer to Meyer's or HTML5 Doctor's reset CSS. I use an modified version of HTML5 Doctor's reset css.

Two url below can also useful for you at least in future.

styling texty inputs only

https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers

Also please be sure that your observation is true. Once, I was also in a same thought for a text positioning but after taking screenshot, and analyzing in photoshop I understood that it was just a prejeduce against IE. There were no difference between the browsers.

I hope these helps.