image-set() 不能用于表格单元格图标适配，因其仅支持 background-image 且存在浏览器兼容、构建工具不识别、路径错误、尺寸错位等问题；推荐优先使用内联 SVG，次选 img+srcset，或用媒体查询替代 image-set()。
image-set() 不能用于 HTML 表格单元格（<td> 或 <th>）内的图标适配——它只支持 background-image，且不适用于内联元素或需要语义化、可访问性、SEO 的图标场景。
你真正想做的，大概率是：在表格里显示清晰的「状态图标」（如 ✅、⚠️、❌），或自定义 PNG/SVG 图标，在 Retina 屏下不模糊。但直接套 image-set() 到 <td> 上，既语法错误，也毫无效果。
background-image 在 <td> 中用 image-set() 为什么失败
-
image-set()只能作为background-image的值，但它本身不是独立属性，必须配合合法 CSS 声明； - 表格单元格默认是
display: table-cell，可以设background-image，但：- 若你写成：
td.icon { background-image: image-set(url("ok.png") 1x, url("ok@2x.png") 2x); }
→ Firefox（v128）直接跳过整行，背景空白；Safari ≤15.3 漏写1x就静默丢弃；Chrome 若路径没引号（如url(ok@2x.png)）也会整条忽略； - 更常见的是：构建工具（Vite/Webpack）根本不会扫描
image-set()里的url()，ok@2x.png没打进dist/，运行时 404，高分屏 fallback 失败； - 单元格若设置了
padding、line-height或文字内容，background-image容易被遮挡或尺寸错位，background-size: contain和background-position: center得手动调，稍不注意就偏移。
- 若你写成：
表格图标该用什么方案？优先级从高到低
-
用 SVG 内联（最推荐）
直接把 SVG 放进<td>里，天然矢量、无缩放模糊、支持伪类和颜色控制：<td><svg width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" d="M..."/></svg></td>
配合td svg { display: block; margin: 0 auto; }就能居中；颜色用color控制，不用管 DPR。 -
用
<img>+srcset（次选）
语义清晰、浏览器原生支持、构建工具自动处理资源：<td><img src="ok-16.png" srcset="ok-16.png 1x, ok-32.png 2x" width="16" height="16" alt="success"></td>
注意：必须带width/height属性防止布局抖动；alt不可省，否则屏幕阅读器无法识别状态。 -
真要用 CSS 背景图？那就放弃
image-set()，改用媒体查询
简单可靠，兼容性拉满，且能同时响应宽度和 DPR：td.icon-ok { background-image: url("ok-16.png"); } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { td.icon-ok { background-image: url("ok-32.png"); background-size: 16px 16px; } }这样连 IE11 都能跑，也不依赖@supports的虚假检测。
容易被忽略的细节
- 表格单元格的
background-image默认平铺（background-repeat: repeat），漏设no-repeat会导致图标重复出现； -
background-position在不同padding下表现不一致，建议统一用background-position: center+background-origin: padding-box； - 如果图标需点击交互，
background-image方案无法绑定事件或聚焦，必须用<img>或 SVG； - 所有方案都要求图标物理尺寸匹配 CSS 声明：若写
width: 16px，@2x 图就得是 32×32px，否则background-size: 16px 16px会拉伸模糊。
表格里的图标，本质是「状态可视化」，不是「装饰性背景」。选错技术路径，后期维护成本远高于初期多写两行 <img>。
