background-size 在 table-cell 上常不生效，因 display: table-cell 非块级容器，需确保背景图直设于 td/th、声明 background-image、避免 border-collapse 干扰，并注意 ie 兼容性及 devtools 验证。
background-size 在 table-cell 上为什么经常不生效
直接给 <td> 或 <code><th> 设置 <code>background-size 却看不到效果，大概率是因为单元格默认是「非块级容器」——display: table-cell 的渲染行为会忽略部分背景相关属性的独立作用，尤其是当背景图来自父级（比如 <table>）或存在边框/折叠模型干扰时。
<p>更常见的情况是：你写了 <code>background-size: 50px 50px;，但图片依然铺满整个单元格，或者被裁切得莫名其妙。这不是语法错，而是渲染上下文没对上。
- 确保背景图是直接设在
<td> 或 <code><th> 上，而不是只写在 <code><table> 或 <code><tr> 上 <li>显式声明 <code>background-repeat: no-repeat;，否则background-size在重复模式下意义有限 - 避免和
border-collapse: collapse+border混用导致的盒模型偏移（背景绘制区域可能被压缩）
正确写法：给 td/th 单独设 background + background-size
必须让每个单元格自己拥有背景图，才能独立控制尺寸。下面是最小可靠写法：
<td style="background-image: url('icon.png');
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: center;">
内容
</td>
注意三点：
-
background-image必须存在，空值或none会让background-size失效 - 推荐用
background简写时把size放在position前，例如：background: url('x.png') no-repeat 24px 24px center;—— 这里24px 24px是background-size，不是background-position，顺序不能错 - 如果要用百分比（如
background-size: 50% 50%;），它相对于单元格内容区（content box）计算，不是整个表格宽度
响应式场景下 background-size: contain / cover 的实际表现
在动态宽度的表格中，contain 和 cover 比固定像素更实用，但要注意它们依赖单元格的「可用高度」——而 <td> 默认高度由内容撑开，不一定等于你预期的“行高”。
<ul>
<li>
<code>background-size: contain; 保证完整显示图片，但可能留白；若单元格太窄，图片会被等比缩到宽度受限，高度自动适应
background-size: cover; 保证填满，但可能裁边；若单元格高度远小于宽度，图片会被横向拉伸或纵向裁剪min-height 或 height（需注意 table-layout: fixed 才能让 height 在 <td> 上可靠生效）
<h3>IE11 及更老浏览器的兼容性陷阱</h3>
<p><code>background-size 在 IE9+ 支持，但 IE11 对 table-cell 的实现有 bug：当单元格没有明确宽高、且父 <tr> 也没设高时，<code>contain/cover 可能退化为 auto，也就是原图大小。
- 绕过方式：给
<td> 加 <code>min-width: 0; min-height: 0;（听起来反直觉，但能重置 IE 的内部尺寸推导逻辑） - 或降级使用固定像素值（如
20px 20px），它在所有支持background-size的 IE 版本中都稳定 - 不要依赖
background-size: 100% 100%去“拉伸适配”，这在 IE 中容易糊掉或失真
真正麻烦的不是写法，而是表格单元格的渲染边界不像 div 那样清晰——背景绘制区域、内容盒、边框盒、表格布局算法，四者稍一错位，background-size 就成了玄学。动手前先用 DevTools 的「Computed」面板确认 background-size 是否被计算出来，再看「Layout」里 background-origin 到底锚在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
