如何在Firefox和Chrome中修复不一致的Textarea底部边距？

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。