Normalize textarea element in Internet Explorer

Question

In all versions of Internet Explorer (including version 11 beta), the element textarea is 1px or 2px lower than a textarea with the same width in any other browser. How to solve?

Answer 1

To solve the layout issue of IE 11 (and makes the layout appearance of all browsers look 99% alike), it is suggested to use CSS Reset.

Copy and paste the CSS Reset script at http://cssreset.com

Answer 2

Just looking at Chrome and IE, they set slightly different default height and margin properties for an otherwise unstyled textarea. To get cross-browser consistency, your best bet is to be explicit about all the box model properties like so (values selected at random but you get the idea):

texarea {
    width: 400px;
    height: 100px;
    padding: 0;
    border: 1px solid #999;
    margin: 0;
}

Hope this helps.

Answer 3

Set height on the textarea element, and set display: block on it (to make height applicable). Example (you should of course use an external style sheet in real life):

<textarea rows=10 style=
"display: block; height: 12em; line-height: 1.2; font-size: 90%; margin: 0">

Using a height value that equals 1.2em times the number of rows seems to work OK. It should be enough for fonts that you normally want to use in a textarea. The rest is there to deal with differences in browser defaults.

Explananation: If you look at a textarea element in browser’s developer tools, you can see that the padding and border values are the same but content height differs. The reason is that textarea formatting is browser-specific and the height calculation is based not only on font size but also on browser-dependent rules. Browsers let you override this.

You could additionally set these, as they correspond to common browser defaults, but some browsers might deviate a bit (which is normally not relevant, but may matter if you aim at pixel-exactness):

textarea { padding: 2px; border-width: 1px; }