表格在 forced-colors: active 下“消失”是因为浏览器清空硬编码的 background-color、border-color 和 color；需用 @media (forced-colors: active) 配合系统语义色（如 Canvas、ButtonText）重建视觉层级，并避免简写边框与装饰属性。
表格元素在 forced-colors: active 下为什么会“消失”
不是表格本身坏了，而是浏览器在高对比度模式下清空了 background-color、border-color 和 color 的硬编码值。你写的 table { background: #f9f9f9; border: 1px solid #ddd; } 全部被忽略，只剩透明背景 + 默认文字色，导致表头和单元格边界完全不可分辨。
必须用 @media (forced-colors: active) 重写表格结构
不能只靠 forced-color-adjust: none——它只对单个元素起效，且需配套颜色声明；而表格是复合结构，真正要做的，是在媒体查询里用系统语义色重建视觉层级：
-
table和th必须显式设background-color: Canvas;或ButtonFace;（不能留 transparent） -
th文字用color: ButtonText;，td用color: CanvasText; - 边框必须拆开写：
border-width: 1px; border-style: solid; border-color: ButtonText;（简写border: 1px solid #000在 forced-colors 下大概率失效） - 避免
box-shadow或background-image，它们在该模式下直接退化为空
哪些表格子元素需要加 forced-color-adjust: none
仅限语义明确、且自定义配色不影响可访问性的局部内容，比如：
- 状态徽章（如
.status-success）：加forced-color-adjust: none;+color: HighlightText;+background-color: Highlight; - SVG 图标列（如带 ✅/❌ 的单元格）：对
svg元素单独设forced-color-adjust: none;，并确保fill和stroke使用系统色关键词（如fill: Highlight;） - 不要给
tr、td或整个table加forced-color-adjust: none;——这会绕过系统保障，反而降低可读性
移动端表格适配最容易漏的三件事
iOS Safari 17.4+ 和 Android Chrome 120+ 才支持 forced-colors: active，但真机验证时极易踩坑：
立即学习“前端免费学习笔记（深入）”；
- iOS 必须同时开启「增加对比度」+「降低透明度」+「使用灰度」三项，缺一不可；仅开一项只会触发
@media (prefers-contrast: high)，不会进 forced-colors 模式 - 规则必须写在 CSS 文件末尾或
@layer base之后，Tailwind 的@layer components里写的@media (forced-colors: active)会被 JIT 编译器跳过 -
forced-color-adjust: none对svg生效，但 Safari 要求父容器加color-scheme: light dark;，否则忽略该声明
ButtonText、CanvasText、Highlight）重新定义表格每一层的视觉责任。硬编码颜色值在 forced-colors: active 下注定无效，连 !important 都拦不住。 
