必须显式声明button { box-sizing: border-box; }，因Safari 15+和部分Android WebView会忽略通配符继承、坚持用UA样式content-box解析；还需同步设置padding、border、line-height等样式才能实现视觉归零。
button必须显式写box-sizing: border-box，通配符无效
直接写 * { box-sizing: border-box; } 对 button 在 Safari 15+ 和部分 Android WebView 中完全不起作用——这些环境会跳过继承，坚持用 UA 样式里的 content-box 解析。你看到按钮宽度忽大忽小、padding 表现不一致，根源就在这儿。
必须单独声明：button { box-sizing: border-box; }
否则哪怕其他元素都正常，button 仍会按 content-box 算尺寸，尤其在 Flex 容器中触发 min-width: min-content 保护机制，导致溢出或换行。
- Safari iOS 下
flex: 1 0 0的 button 突然撑满容器？加min-width: 0才能关掉这个保护 - Android 4.4 WebView 可能静默丢弃
box-sizing声明，border 会被当“不可见占位符”额外挤压内容区 - Bootstrap 3 没这句，Bootstrap 5+ 虽有，但调试时容易误判为已生效，实际被 UA 样式覆盖
normalize.css 后还得补三类关键样式
normalize.css 只修复基础继承和盒模型，不碰 padding、border、line-height 这些视觉锚点。光靠它，按钮在 Chrome/Firefox/Safari 里依然高矮胖瘦各不同。
真正“视觉归零”要同步控制：
-
padding：Chrome 默认6px 12px，Firefox 是4px 8px，IE8 是硬编码值 → 统一写死，如padding: 8px 16px或padding: 0（后者需配border和line-height） -
border：Firefox 默认1px inset，Safari 是1px solid，IE6–7 把无色边框当占位符 → 推荐border: 1px solid transparent，既占位又不显色 -
line-height与高度控制：别用height: 36px硬设，改用min-height: 36px+padding: 8px 16px+line-height: 20px，文字垂直居中更稳
为什么不能用 * { margin: 0; padding: 0; } 初始化
这句看着省事，实则破坏表单控件交互体验：textarea 文字贴边、button 点击热区变小、input 清除按钮空间丢失、focus outline 消失——键盘用户根本找不到焦点在哪。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的问题是性能：浏览器要为每个 DOM 节点匹配 *，节点多时明显拖慢 CSSOM 构建。
- 真正该初始化的只有五类：body（清默认 margin）、h1–h6/p/blockquote（重置 margin）、ul/ol（仅
list-style: none）、a（去下划线）、img（vertical-align: middle） - 表单控件默认间距不是 bug，是交互必需——比如 Firefox 给 button 的上下
0.25em内边距，就是为手指点击留余量 - 要用
all: unset？只限封装 UI 库组件时，且必须手动补display，绝不能用在body或html
引入顺序错，normalize.css 就等于没加
normalize.css 必须放在所有自定义 CSS 文件之前。顺序错了，它的 button { font-family: inherit; } 就会被你后写的 body { font-family: "Inter", sans-serif; } 覆盖，结果按钮在 Windows 和 macOS 上字体回退到完全不同系统字体，视觉割裂。
常见症状包括：
- 页面首次渲染闪动（UA 样式 → normalize → 自定义，三阶段重绘）
- textarea 在 iOS 上无法拖拽缩放（resize 被 UA 样式覆盖后未被 normalize 恢复）
- input[type="number"] 微调按钮在 Safari 显示、Chrome 隐藏（normalize 不干预
appearance，只校准继承）
真正难的不是“加不加”，而是“加在哪”和“加完还缺啥”。button 的兼容性问题，从来不是单一样式能解决的。
