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

问题

I have the following sample code:

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>

It shows a red region (<div>) containing the paragraph "hellohellohello..." (<p>) and a resizable textarea (<textarea>).

Behavior in Firefox (version 72): When I resize the textarea, inline CSS properties width and height are added to the textarea element. When necessary, the containing <div> will be resized to neatly contain both the paragraph and the textarea.

Behavior in Chrome (version 80): When resizing the textarea, an additional inline CSS property margin is added to the textarea as well, causing the containing <div> to be resized together with the textarea, keeping the initial margins fixed.

Does anybody know why these behaviors are different between Chrome and Firefox?

In my current application, I prefer the Firefox behavior. How can I make Chrome to use the same behavior as Firefox? (Preferably without using JavaScript...)

Edit:

I noticed that the behavior is correct when I remove the display: block; CSS declaration from the textarea element.

So the actual questions here are:

why the textarea element's margins become "fixed" in Chrome when using display: block; in its CSS styling, and
how to avoid this behavior in Chrome while keeping display: block; in the CSS styling.

回答1:

This is an interesting behavior in Mozilla. This need to be share to relative Mozilla community. For temporary solution you can override inline "margin" property by using !important property in CSS. Try below code :

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>

; }

来源：https://stackoverflow.com/questions/60204423/resizing-a-textarea-in-chrome-adds-an-inline-css-property-margin-but-firefo

标签

html

css

textarea