如何在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

为您的textarea设置display: block。

Answer 4

只需按以下步骤停用调整大小

textarea {resize：none;}