Crossbrowser input text vertical alignment

Question

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 + line-height;

I think that should work, but in my IE input text a bit lower than it has to be.

Here is an example http://jsfiddle.net/FNMZS/1

HTML

<div id="all">
        <input type="text" placeholder="Enter email" />
</div>

CSS

* {
    padding:0px;
    margin:0px;
}
#all {
    padding:100px;
}
input {
    border:1px solid #000;
    font-family: Arial, sans-serif;
    font-size:12px;
    line-height:1em;
    padding:4px 10px;
}

Answer 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.