1

我有以下示例代码：

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

所以这里的实际问题是：

  • display: block;为什么 textarea 元素的边距在 Chrome中使用其 CSS 样式时变得“固定” ，以及
  • 如何在保持display: block;CSS 样式的同时避免 Chrome 中的这种行为。
4

1 回答 1

1

这是 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>

; }

于 2020-02-13T11:28:53.107 回答