在 Chrome 中调整 `textarea` 的大小会添加内联 CSS 属性 `margin`，但 Firefox 不会添加它……为什么？

Question

我有以下示例代码：

div {
  display: inline-block;
  padding: 5px;
  background: #f00;
}

textarea {
  display: block;
}

<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<div>
  <p>hellohellohellohellohellohellohellohello</p>
  <textarea></textarea>
</div>

它显示了一个包含段落 "hellohellohello..." (<p>) 的红色区域 (<div>) 和一个可调整大小的文本区域 (<textarea>)。

Firefox（版本 72）中的行为：当我调整文本区域大小时，内联 CSS 属性 width 和 height 被添加到文本区域元素。必要时，包含的 <div> 将调整大小以整齐地包含段落和文本区域。

Chrome（版本 80）中的行为：调整文本区域大小时，文本区域也会添加额外的内联 CSS 属性 margin，导致包含 <div> 与文本区域一起调整大小，保持初始边距固定。

有人知道为什么 Chrome 和 Firefox 之间的这些行为不同吗？

在我当前的应用程序中，我更喜欢 Firefox 的行为。我怎样才能使 Chrome 使用与 Firefox 相同的行为？（最好不使用 JavaScript...）

编辑:

我注意到当我从 textarea 元素中删除 display: block; CSS 声明时行为是正确的。

所以这里的实际问题是：

Answer 1

这是 Mozilla 中的一个有趣行为。这需要分享给相关的 Mozilla 社区。对于临时解决方案，您可以使用 CSS 中的 !important 属性覆盖内联 "margin" 属性。试试下面的代码：

div {
  display: inline-block;
  padding: 5px;
  background: #f00;
}

textarea {
  display: block;
  margin:0 !important;
}

<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<div>
  <p>hellohellohellohellohellohellohellohello</p>
  <textarea></textarea>
</div>

; }

Resizing a `textarea` in Chrome adds an inline CSS property `margin`, but Firefox doesn't add it... Why?