在 Chrome 中调整 `textarea` 的大小会添加一个内联 CSS 属性 `margin`，但 Firefox 没有添加它......为什么？
[英]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> ).它显示了一个包含段落“hellohellohello...”（ <p> ）和一个可调整大小的文本区域（ <textarea> ）的红色区域（ <div> <textarea> ）。
Behavior in Firefox (version 72): When I resize the textarea, inline CSS properties width and height are added to the textarea element. Firefox 中的行为（版本 72）：当我调整 textarea 的大小时，内联 CSS 属性width和height被添加到 textarea 元素。 When necessary, the containing <div> will be resized to neatly contain both the paragraph and the textarea.必要时，包含的<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（版本 80）中的行为：当调整 textarea 大小时，额外的内联 CSS 属性margin也会添加到 textarea 中，导致包含的<div>与 textarea 一起调整大小，保持初始边距固定。
Does anybody know why these behaviors are different between Chrome and Firefox?有人知道为什么这些行为在 Chrome 和 Firefox 之间有所不同吗？
In my current application, I prefer the Firefox behavior.在我当前的应用程序中，我更喜欢 Firefox 的行为。 How can I make Chrome to use the same behavior as Firefox?如何让 Chrome 使用与 Firefox 相同的行为？ (Preferably without using JavaScript...) （最好不使用 JavaScript...）
Edit :编辑：
I noticed that the behavior is correct when I remove the display: block;我注意到当我删除display: block;时行为是正确的display: block; CSS declaration from the textarea element.来自textarea元素的 CSS 声明。
So the actual questions here are:所以这里的实际问题是：
- why the textarea element's margins become "fixed" in Chrome when using
display: block;使用display: block;时，为什么 textarea 元素的边距在 Chrome 中变得“固定”display: block;in its CSS styling, and在其 CSS 样式中，以及 - how to avoid this behavior in Chrome while keeping
display: block;如何在保持display: block;同时避免 Chrome 中的这种行为display: block;in the CSS styling.在 CSS 样式中。
1 个解决方案
解决方案1
0 已采纳 2020-02-13 11:28:53
This is an interesting behavior in Mozilla.这是 Mozilla 中一个有趣的行为。 This need to be share to relative Mozilla community.这需要分享给相关的 Mozilla 社区。 For temporary solution you can override inline "margin" property by using !important property in CSS.对于临时解决方案，您可以使用 CSS 中的 !important 属性覆盖内联“边距”属性。 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>
; ; } }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.