Chrome text height

Question

Does anyone have a solution to the textarea height issue in Chrome?

In the simple case:

<div> <textarea> </textarea> </div> 

Google Chrome adds two pixels, so div.height = textarea.height + 2px. And yes, I'm trying Eric "reset.ccs" - it doesn't work.

PS Of course, in my "simple case" textarea and div have a border, padding and margin 0px.

Answer 1

This is because textarea is a replaced inline element.

 textarea { display:block; } 

should solve your "problem".

Answer 2

2px is the standard border size. This is the same in all browsers.

This works in Chrome, Firefox ..

Without Borders: http://jsfiddle.net/NctDT/2/

Borders and ajusted div height: http://jsfiddle.net/NctDT/4/

In both cases, div and textarea perfectly aligned in height.

Answer 3

Sorry, but adding html,body{ height:100%; }
html,body{ height:100%; }
really works