不同浏览器中CSS表单元素盒模型的一致性如何？

在不同浏览器中实现一致的盒模型行为一直是前端开发者头疼的问题，特别是表单元素。各大浏览器对inputselecttextarea等控件内置样式和默认尺寸处理方式各异，导致同一段代码在 Chrome、Firefox、Safari 甚至 IE 上呈现出明显差异。

使用者痛点汇总

1️⃣ 视觉不一致：**表单控件高度与宽度无法统一** 当你设置固定尺寸后Chrome 可能压缩内边距导致文本被截断。而 Firefox 则会保留默认行高，使得高度超出预期。

2️⃣ 样式覆盖困难：**原生样式无法轻易移除** 即使使用appearance: none去掉外观。也不会自动重置 padding、border 或字体继承逻辑，导致不同浏览器间仍存在微小差别。

3️⃣ IE 兼容性问题：**旧版 IE 忽略伪元素和 box-sizing** IE11 及更早版本对表单元素完全忽略 box-sizing 与伪元素。使得高度和内边距被“锁定”，难以控制。

浏览器差异一览

Chrome / Edge

- 默认 。,, 的 padding 为 8px，12px。- 支持并遵循 CSS box‑model 标准；但若未显式声明 box-sizing,会按标准计算。

Firefox

- 默认 padding 较小。