表单控件在chrome/firefox/safari中高度、边框、内边距不一致，是因各浏览器user agent stylesheet对input、select、textarea、button的padding、border、box-sizing、line-height默认定义不同；需用normalize.css收敛差异并搭配box-sizing: border-box（含单独声明button），避免与reset.css混用，且sanitize.css forms.css可提供低特异性安全覆盖。
为什么表单控件在Chrome/Firefox/Safari里高度、边框、内边距都不一样
不是你写错了CSS，是浏览器自带的 user agent stylesheet 对 input、select、textarea、button 的默认 padding、border、box-sizing、line-height 各自定义。比如 Chrome 给 input[type="text"] 设了 padding: 1px 2px，Safari 可能是 padding: 2px 4px，Firefox 还可能把 line-height 解析成比字体大得多的值——并排放三个控件，立刻错位。
更麻烦的是，这些差异在 flex 布局或 input-group 里会被放大：一个控件撑高了，旁边按钮就对不齐；textarea 的垂直对齐在 IE 和 Safari 下完全不是一回事。
用 normalize.css + box-sizing: border-box 是最省心的起点
normalize.css 不清空样式，而是收敛差异：统一 input[type="search"] 的清除按钮、修复 Safari 下 textarea 的 baseline 对齐、保留 pre 的换行语义。但它不处理盒模型——所以必须搭配：
- 在所有 CSS 最前面加
* { box-sizing: border-box; } - 但仅靠通配符不够：Safari 15+ 和部分 Android WebView 对
button会忽略继承，必须单独写button { box-sizing: border-box; } -
normalize.css必须在自定义 CSS 之前引入，顺序错了等于没引 - 别和
reset.css混用，两者逻辑冲突：reset清零，normalize校准，混用会导致表单控件文字缩得看不见
手动统一 padding/margin 时，避开这几个坑
直接写 input, select, textarea { padding: 0.375rem 0.75rem; margin: 0; } 看似简单，但容易漏掉关键点：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
select在旧版 Edge 和 Safari 中不响应padding-top，得靠line-height配合微调 -
textarea的默认resize行为在 Firefox 下会破坏高度计算，建议显式设resize: vertical;或禁用 -
margin不能只清0：某些 UA 样式会给fieldset加margin-block，需单独重置 - 用
rem而非px，否则缩放字体时控件内边距会失衡
sanitize.css forms.css 适合需要零特异性覆盖的项目
如果你的项目已有复杂 CSS 规则，担心新样式被老规则覆盖，sanitize.css forms.css 是更安全的选择。它用 :where() 包裹所有选择器，天然低特异度：
code>:where(button, input, select, textarea) {
background-color: transparent;
border: 1px solid WindowFrame;
padding: 0.25em 0.375em;
}
这意味着它不会打断你已有的 .form-control:focus 或 .custom-btn 样式，但又能抹平默认差异。注意它不处理 label 或 fieldset，这两类仍需单独归一化。
真正难的不是写几行 reset，而是意识到：表单控件的渲染逻辑深绑在浏览器内核里，哪怕用了 normalize，aspect-ratio、focus-visible 这类新特性依然得靠渐进增强来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
