Несовместимая обработка текстовой области в браузерах

Question

Вот что я вижу для разметки, представленной ниже.Ни один из браузеров не хранит текстовые области в контейнере, что неудобно, но не является большой проблемой.Однако раздражает то, что независимо от того, что я делаю, я не могу избавиться от нижнего поля для текстовой области в Chrome.Любые предложения?

Здесь все в скрипке: http://jsfiddle.net/radu/RYZUb/

Разметка:

<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

Чтобы исправить «нижнее поле для текстовой области в Chrome», добавьте vertical-align: top к #txtInput.

Live Demo

Теперь у вас есть согласованный рендеринг между перечисленными вами браузерами.

Хотите ли вы найти решение для textarea, выходящее за пределы контейнера?

---

Это исправляет IE8, Firefox, Chrome, Safari, Opera. Не помогает в IE7, хотя:

Live Demo

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

Здесь мы используем box-sizing свойство .

Вероятно, есть способ сделать это точно даже в IE7, но если вы действительно не заботитесь об этом браузере, вероятно, лучше просто жить с ним, выступающим ~ 3px за пределы контейнера в этом браузере.

Answer 2

Эту проблему можно решить, установив блокировку дисплея для текстовой области

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

Ширина текстовой области не включает границу в 1 пиксель, поэтому уменьшение ширины на 2 пикселя предотвратит переполнение текстовой области.

Answer 3

В Chrome 9.0.597.107 у меня работало нижнее поле -5px.

#txtInput
{
    height:100px;
    width:100%;
    margin:0 0 -5px;
    padding:0px;
}