Как исправить несовместимое нижнее поле Textarea в Firefox и Chrome?

Question

Я пытаюсь устранить дополнительное нижнее поле, которое FF и Chrome, похоже, дают Textareas. Удивительно, но IE, кажется, делает это правильно. Я хотел бы избежать использования условных включений, но настройки CSS3 в порядке.

Пример кода

.red-box {
    background-color: red;
    overflow: hidden;
}
textarea {
    border: solid 1px #ddd;
    margin: 0px; /* Has no effect */
}

<div class="red-box">
    <textarea>No Margin Please!</textarea>
</div>

Answer 1

По умолчанию я считаю, что и Chrome, и Firefox установят эти элементы как display: inline-block;. Установите display: block в ваших стилях, и все должно быть в порядке.

Answer 2

Если вы хотите оставить его встроенным, просто попробуйте

vertical-align: top

Answer 3

Набор display: block для вашего текстового поля.

Answer 4

Просто отключите изменение размера следующим образом

textarea {resize: none;}