Inconsistent textarea handling in browsers

Question

Here's what I'm seeing for the markup provided below. None of the browsers are keeping the textareas in the container which is inconvenient but not that big of an issue. However, what is annoying is that no matter what I do I can't get rid of the bottom margin for the textarea in Chrome. Any suggestions?

Here is everything in a fiddle: http://jsfiddle.net/radu/RYZUb/

Markup:

<div id="wrap">
    <textarea id="txtInput" rows="6" cols="20"></textarea>
    <div id="test"></div>
</div>

CSS:

#wrap
{
   background-color:green;
   height:210px;
   width:440px;
}
#txtInput
{
    height:100px;
    width:100%;
    margin:0px;
    padding:0px;
}
#test
{
    background-color:gray;
    height:100px;
    width:100%;
    margin:0;
    padding:0;
}

Answer 1

To fix "the bottom margin for the textarea in Chrome", add vertical-align: top to #txtInput.

Live Demo

Now you have consistent rendering between the browsers you listed.

Do you want a solution for the textarea extending outside the container?

---

This fixes IE8, Firefox, Chrome, Safari, Opera. Doesn't help in IE7 though:

Live Demo

#txtInput
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Here, we're using the box-sizing property.

There's probably a way to get it exactly right in even IE7, but unless you really care about that browser, it's probably best to just live with it protruding ~3px outside the container in that browser.

Answer 2

This can be resolved by setting the display to block for the textarea

#txtInput
{
  height:100px;
  width:438px;
  margin:0px;
  padding:0px;
  display:block;
}

The width of the textarea doesn't include the 1px border so reducing the width by 2px will prevent the overflow of the textarea.