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

Я пытаюсь устранить дополнительный нижний край, который как 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>

Ответ 1

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

Ответ 2

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

vertical-align: top

Ответ 3

Установите display: block для вашего текстового поля.

Ответ 4

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

textarea {изменить размер: нет;}