在Chrome中调整"textarea"的大小会添加一个内联CSS属性"margin"，但Firefox不会添加它……为什么? [英] Resizing a `textarea` in Chrome adds an inline CSS property `margin`, but Firefox doesn't add it... Why?
问题描述
我有以下示例代码:
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> ).
It shows a red region (<div>) containing the paragraph "hellohellohello..." (<p>) and a resizable textarea (<textarea>).
Firefox中的行为(版本72):调整文本区域大小时，将内联CSS属性 width 和 height 添加到textarea元素中.必要时，将调整包含的< div> 的大小，使其整齐地包含段落和文本区域.
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.
Chrome(版本80)中的行为:调整文本区域的大小时，还会在文本区域中添加一个附加的内联CSS属性 margin ，从而导致包含< div> 与文本区域一起调整大小，使初始边距保持不变.
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.
有人知道为什么Chrome和Firefox之间的行为不同吗?
Does anybody know why these behaviors are different between Chrome and Firefox?
在当前应用程序中，我更喜欢Firefox行为.如何使Chrome使用与Firefox相同的行为?(最好不使用JavaScript ...)
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...)
修改:
当我从 textarea 元素中删除 display:block; CSS声明时，我注意到该行为是正确的.
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:
- 为什么在CSS样式中使用
display:block;时，Chrome中的textarea元素的边距被固定"，以及 - 如何在Chrome中避免这种行为，同时保持CSS样式中的
display:block;.
- 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.
推荐答案
在Mozilla中这是一个有趣的行为.这需要分享给相关的Mozilla社区.对于临时解决方案，您可以通过使用CSS中的！important属性来覆盖内联"margin"属性.尝试以下代码:
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>;}
这篇关于在Chrome中调整"textarea"的大小会添加一个内联CSS属性"margin"，但Firefox不会添加它……为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
