forced-color-adjust 不影响盒模型计算，高对比度下视觉异常源于系统清空 background/border 等样式而非 box-sizing 失效；修复关键是在 forced-colors: active 下用语义色关键词（如 ButtonText）显式声明边框、文字色等，而非依赖被清空的属性。
forced-color-adjust 本身不参与盒模型计算，它只控制颜色是否被系统强制接管；高对比度下盒模型异常（如边框消失、背景塌陷、尺寸错乱）的根源是 @media (forced-colors: active) 触发后浏览器清空了部分样式，而非 box-sizing 失效。
为什么 box-sizing: border-box 在 forced-colors 下“看起来失效”
它其实一直有效——只是你看到的“撑不开”“边框没了”“内边距没反应”，根本不是盒模型算错了，而是系统直接抹掉了 background-color、border-color、box-shadow 等声明。例如：
- 写了
padding: 16px; border: 2px solid #333;，但border-color被忽略 → 只剩透明边框，视觉上像“没边框” - 用了
background-image: linear-gradient(...);→ 整个背景被清空，只剩透明底色，内容仿佛“塌陷” -
box-sizing: border-box仍在计算尺寸，但因背景/边框不可见，你误判为“没撑开”
真正要改的不是 box-sizing，而是 forced-colors 下的显式结构声明
系统接管后，必须用语义色关键词重建视觉锚点，不能依赖继承或默认值：
- 按钮必须写
border: 2px solid ButtonText;（不能只靠 background-color） - 输入框必须写
border: 2px solid CanvasText;+outline: 2px solid Highlight; - 容器若需“撑高”，得靠
min-height: 1em;或padding-block: 8px;这类不被清空的属性，而不是指望 background-color 带来视觉厚度 - 伪元素
::before/::after的background会被清空，改用content: "";+border构建形状
forced-color-adjust: none 不是盒模型修复方案，而是高风险例外操作
它只在极少数场景下有用，且必须配套完整颜色声明：
立即学习“前端免费学习笔记（深入）”；
- 仅对 SVG 图标、状态徽章等语义明确的小元素使用，别用在按钮、表单上
- 加了
forced-color-adjust: none;后，必须立刻写color: HighlightText;和background-color: InfoBackground;—— 缺一不可 - 如果 SVG 内部用了
fill="currentColor"，还得额外加color-scheme: light dark;（Safari 17.4+ 才认） - 仍要禁用
box-shadow、filter、background-image，这些即使加了none也无效
最容易被忽略的一点：高对比度适配不是“让页面看起来更漂亮”，而是确保所有交互区域有足够轮廓和可区分的视觉层级——哪怕只靠边框和文字颜色也能识别。盒模型本身没问题，问题出在你依赖的样式被系统静默覆盖了。
