Bootstrap 5 的 Reboot 是跨浏览器一致性的底层基础设施，通过精准控制盒模型、表单行为、字体继承与伪元素规则，并采用 :where(:root) 等安全选择器避免样式污染，确保基础渲染统一。
Bootstrap 5 的 Reboot 不是可选的“美化补丁”，而是跨浏览器一致性的底层基础设施——它直接干预盒模型、表单控件行为、字体继承链和伪元素渲染规则，漏掉任何一个环节，col-12 就可能在 Safari 中窄 4px，form-control 在 Edge 中光标错位，h2 在 Firefox 里多出 8px 上边距。
box-sizing: border-box 必须全局生效，但不能粗暴用 *
老式重置写 * { box-sizing: border-box; } 看似简单，实则危险：它会污染 iframe、canvas、svg 的原生尺寸逻辑，某些 Android WebView 渲染异常就是由此引发。Bootstrap 5 采用 :where(:root) { box-sizing: border-box; } + *::before, *::after { box-sizing: border-box; } 组合，既覆盖所有常规元素，又通过 :where() 避免样式权重干扰第三方组件。
- 必须确保该规则在所有自定义 CSS 之前加载，否则后续
box-sizing: content-box声明会被覆盖 -
svg元素若带内联width属性，在旧版 Android 浏览器中仍可能忽略max-width: 100%，需额外加display: block - 不要在
Reboot后手动给input[type="range"]设box-sizing，它的默认行为依赖content-box
表单控件 appearance 和 cursor 重置直接影响交互一致性
Chrome 默认按钮圆角、Safari 按钮文字垂直居中偏移、Edge 下拉箭头消失——这些都不是 UI bug，而是浏览器对 appearance 的不同实现。Reboot 显式设 appearance: none 并重置 cursor: pointer 和 line-height，让所有表单元素从同一起点开始定制。
-
select在 iOS Safari 中必须配合-webkit-appearance: none才能真正隐藏原生下拉箭头，仅靠标准appearance: none不够 -
textarea的resize行为未被 Reboot 重置，如需禁用需单独加resize: none - 使用 Tailwind 时，必须关闭其
preflight，否则appearance被清两次，button变成无样式矩形
line-height 和 font-family 继承链断裂会导致阅读流崩塌
Reboot 设置 :where(:root) { line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }，这不是为了“好看”，而是防止 p 里嵌套 span 时行高叠加、h3 在移动端因系统字体 fallback 导致字号浮动。
立即学习“前端免费学习笔记（深入）”；
- 若项目用
rem布局，必须同步重置html { font-size: 16px; }，否则 iOS Safari 会沿用其默认 16px，但部分安卓机默认是 14px，造成基准偏移 -
address、small等语义元素的font-style和font-size未被 Reboot 触及，如需统一需额外声明 - 使用 Web Components 时，
:where()无法穿透 Shadow DOM，需在组件内部重复该line-height声明
真正难的不是写几行重置 CSS，而是判断哪些规则必须强制继承、哪些必须隔离作用域、哪些浏览器差异已不可逆——比如 Safari 对 flex 子项 min-width: auto 的处理至今没完全对齐 Chrome，这时 Reboot 不会硬改，而是留出明确的修复入口。
