Несогласованная обработка текстовых полей в браузерах

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

Textarea handling in different browsers Здесь все в скрипке: 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;
}

Ответы

Ответ 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 вне контейнера в этом браузере.

Ответ 2

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

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

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

Ответ 3

В Chrome 9.0.597.107 для меня работала нижняя граница -5px.

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