浏览器默认样式导致替换元素盒模型行为异常，需显式重置 fieldset、button、input 等的 padding、border、box-sizing 及相关属性，避免依赖通配符覆盖。
不是盒模型“不一致”，而是你没覆盖浏览器默认行为——box-sizing: border-box 对 fieldset、button、input 这类替换元素基本无效，它们的 padding、border、height 解析逻辑由 UA 样式硬编码决定，且各内核实现不同。
fieldset 的 padding 无法被 * { box-sizing: border-box } 覆盖
Chrome 和 Firefox 默认给 fieldset 设 padding: 0.35em 0.75em，Safari 可能只设上/下或直接忽略；更关键的是，UA 样式优先级高于通配符，box-sizing 根本不参与它的盒计算流程。legend 还会侵入顶部区域，导致视觉错位。
- 必须显式写
fieldset { padding: 0; margin: 0; }，再按需加回（推荐用px，比如padding: 8px 12px;） - 必须同步重置
legend { margin: 0; padding: 0; }，否则 Safari 下 legend 上浮、Chrome 下可能被截断 - IE8–11 不支持
box-sizing与em混用，若需兼容，全部用px，且避免声明box-sizing在同一规则里
button 的 box-sizing 在 Safari 15+ 和 Android WebView 中不继承
Safari 把 button 当作系统控件特殊处理，* { box-sizing: border-box } 会被静默忽略，它坚持用 UA 里的 content-box 解析内边距。只写这一条，按钮在 Flex 容器中就可能突然撑开、换行。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须显式声明
button { box-sizing: border-box; min-width: 0; }——min-width: 0是关闭 Safari 隐式min-content保护的关键 - “视觉归零”还需三件套：
padding（统一写死，如8px 16px）、border（推荐1px solid transparent）、line-height（配合min-height控制高度） - Bootstrap 5+ 虽已内置该声明，但调试时容易误判来源；若引入了 Ant Design 等库，先看 DevTools 的 computed 样式确认 padding 来源
input/textarea 的 height 和 line-height 行为根本不同
给 input 设 height: 40px，Chrome 会压缩内容区把 padding+border+文字全塞进去，Firefox 则倾向保留默认行高，结果文字贴顶或垂直偏移。这不是 bug，是规范未定义 height 应作用于哪一层。
- 优先用
min-height+padding+line-height组合替代height，例如：min-height: 40px; padding: 12px 16px; line-height: 16px; -
appearance: none后必须手动补padding、border、font，Safari 的select默认左右12px，Chrome 是8px，不重置就错位 - IE11 不支持
appearance: none，清除原生控件需用::-ms-clear等私有伪元素
真正难处理的从来不是单点差异，而是多个叠加：比如一个用了 color(srgb) 的 button，又带 backdrop-filter，还设了 border: 1px solid transparent——Safari 会同时触发色彩映射、合成层陷阱和边框热区丢失，问题表象互相掩盖。排查时得一层层拆，别指望一条规则通吃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
