如何修复 Firefox 和 Chrome 中不一致的 Textarea 下边距？答案

【问题标题】：How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?如何修复 Firefox 和 Chrome 中不一致的 Textarea 下边距？
【发布时间】：2011-03-28 02:33:19
【问题描述】：

我正在尝试消除 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>

【问题讨论】：

FWIW，我无法再在 Firefox 45 上重现此问题。不过，它仍然出现在 Chromium 48 上。

标签： css html cross-browser textarea

【解决方案1】：

默认情况下，我相信 Chrome 和 Firefox 都会将这些元素设置为display: inline-block;。在你的样式中设置display: block，你应该已经准备好了。

【讨论】：

太棒了。但是你还必须用!important 显式设置margin。因为当 textarea 使用 display: block... 时，Chrome 似乎将 textarea 的边距保持在其容器的“固定”...（您可以查看解决该问题的 stackoverflow.com/questions/60204423。）

【解决方案2】：

如果你想保持内联，只需尝试

vertical-align: top

【讨论】：

这对我有用，我在其他任何地方都找不到。谢谢！
从来不知道这个！如果你不想让它成为一个块很好:)

【解决方案3】：

为您的文本区域设置display: block。

【讨论】：

【解决方案4】：

只需按以下方式禁用调整大小

textarea{resize: none;}

【讨论】：

对不起，这没有帮助。但我也认为这是一些晦涩难懂的事情。