必须显式重置 button 和 input 的 box-sizing、padding、margin 和 border，因为 safari 15+、旧 android webview 及 ie 的 ua 样式硬编码会跳过继承，使 * { box-sizing: border-box } 对 button 无效，且 padding、line-height、border 不统一会导致对齐错位、高度异常等问题。
必须显式重置 button 和 input 的 box-sizing、padding、margin 和 border，仅靠通配符或 Normalize.css 不足以覆盖 Safari、旧 Android WebView 及 IE 的 UA 样式硬编码行为。
为什么 * { box-sizing: border-box } 对 button 无效
Safari 15+ 和部分 Android WebView（如 Android 4.4 内置）会跳过继承链，坚持用 UA 样式解析 button，默认走 content-box。即使你写了全局声明，button 仍可能按旧模型计算尺寸。显式写 button { box-sizing: border-box; } 才能真正覆盖。
-
button在 Safari iOS 中被当作系统控件处理，CSS 继承被降级甚至忽略 - 某些 WebView 把
border当作不可见占位符，box-sizing声明可能被静默丢弃 - Bootstrap 5+ 虽已内置该声明，但调试时容易误判来源，建议单独强化
统一 padding 必须连带控制 border 和 line-height
padding 差异本质是 UA 硬编码值不同：Chrome 给 button 设的是 6px 12px，Firefox 是 4px 8px，IE8 则完全不响应纯 padding 覆盖。只设 padding 会导致 Safari 文字偏上、IE7/8 内容被挤压。
- 推荐组合：
padding: 8px 16px; border: 1px solid transparent;—— 透明边框既占位防塌陷，又不干扰视觉 - 必须同步设
line-height: 20px;（配合padding总高 ≈ 36px），避免依赖浏览器默认line-height导致垂直错位 - IE6–7 不识别
box-sizing，所以padding: 0必须搭配border: 1px solid transparent，否则内容区会被进一步压缩
Flex 布局下 button 宽度异常的 Safari 隐形陷阱
当 button 在 Flex 容器中使用 flex: 1 0 0 时，若其 box-sizing 仍是 content-box，Safari 会触发 min-width: min-content 保护机制，导致按钮意外撑宽或换行，而 Chrome/Firefox 表现正常。
- 修复方式：显式加
min-width: 0;关闭 Safari 的隐式保护 - 必须确保
button和同级input同时有box-sizing: border-box，否则高度对齐失效（input默认content-box，button默认border-box） - 不要用
height: 36px硬设——改用min-height: 36px; padding: 8px 16px;，更稳定兼容字号缩放
最常被忽略的一点：表单控件的默认间距不是“样式可覆盖层”的问题，而是 UA 硬编码行为。你写的规则越依赖浏览器默认逻辑（比如只设 padding、不碰 border 和 line-height），在旧环境里就越容易失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
