时间戳

首页 > 解决方案 > 在 Chrome 中调整 `textarea` 的大小会添加一个内联 CSS 属性 `margin`，但 Firefox 没有添加它...为什么？

html - 在 Chrome 中调整 `textarea` 的大小会添加一个内联 CSS 属性 `margin`，但 Firefox 没有添加它...为什么？

问题描述

我有以下示例代码：

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>

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

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

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

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

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

编辑：

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

所以这里的实际问题是：

标签： htmlcsstextarea

解决方案

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

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>

; }

推荐阅读