fieldset内textarea宽度适配：跨浏览器间距差异原因及解决

嘿，我来帮你捋清楚这个问题的来龙去脉，以及怎么解决它！

为什么会出现间距差异？ #

核心原因是浏览器的默认样式和盒模型规则在搞事情：

• 首先，fieldset元素本身默认带有左右内边距（padding），而textarea默认自带边框（border）和内边距（padding）。
• 当你给textarea设置width: 100%时，浏览器默认的盒模型（box-sizing: content-box）会把这个100%仅计算为内容区域的宽度，textarea自身的border和padding会额外占用空间，导致它超出fieldset的padding范围，视觉上就和其他元素（比如你代码里的div）的左右间距不一样。
• 另外Chrome和Firefox对fieldset的默认padding值、textarea的默认样式存在细微差异，这会进一步放大间距不一致的效果。

怎么解决这个问题？ #

最简单有效的方案是调整盒模型，还有可选的彻底重置样式方案：

方案一：给textarea设置box-sizing: border-box

这是最通用的解决方式，让textarea的宽度计算包含自身的border和padding，这样width: 100%就刚好填满fieldset的内容区域，不会超出。修改后的CSS代码如下：

textarea {
  width: 100%;
  box-sizing: border-box;
}

方案二：统一重置默认样式（更彻底）

如果想要更规整、无浏览器差异的样式，可以同时重置fieldset和textarea的默认边距、内边距：

/* 重置fieldset的默认样式 */
fieldset {
  padding: 1rem;
  margin: 0;
  border: 1px solid #ddd;
}

/* 重置textarea并设置铺满规则 */
textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 0.5rem;
  margin: 0;
  resize: vertical; /* 可选，仅允许垂直拉伸textarea */
}

这样调整后，不管在Chrome还是Firefox里，textarea的左右间距都会和fieldset内的其他元素保持一致啦～

内容的提问来源于stack exchange，提问作者handle