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
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?
No correct solution
OTHER TIPS
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
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.
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; }