IE11中display:table-cell元素::before伪元素背景图无法显示问题咨询

这问题我之前排查过，IE11的这个兼容性坑确实有点绕，咱们一步步拆解核心原因：

核心结论 #

不是不能给display: table-cell的元素添加伪元素，而是IE11的Trident渲染引擎对表格布局元素的伪元素渲染规则和现代浏览器完全不一样，导致背景图无法正常显示。

具体原因拆解 #

1. 表格布局的特殊渲染逻辑
   IE11会把设置了display: table-cell的元素完全按照原生<td>单元格的规则来处理，而它的旧版渲染引擎对表格单元格内的伪元素有严格限制：伪元素默认的display: inline会被表格布局的逻辑压制，导致伪元素无法占据实际的渲染空间——没有空间，背景图自然就显示不出来了。

2. 现代浏览器的处理差异
   Chrome、Firefox等现代浏览器的渲染引擎（Blink、Gecko）已经更新了表格布局下伪元素的处理逻辑，会正常识别伪元素的宽高和背景属性，哪怕伪元素是默认的inline类型，也能根据设置的宽高渲染出空间，所以背景图能正常显示。

验证小技巧 #

你可以试一下给伪元素显式设置display: inline-block或者display: block，再重新设置宽高，IE11里的背景图应该就能正常显示了，比如：

span.table-cell {
  display: table-cell;
}
span.table-cell::before {
  content: '';
  background: url('你的图片地址') no-repeat center center;
  width: 30px;
  height: 30px;
  display: inline-block; /* 关键修改：改变伪元素的display类型 */
}

这也侧面印证了问题的本质：IE11不是不支持table-cell元素的伪元素，而是默认的inline伪元素在它的表格布局里无法正常渲染空间。

内容的提问来源于stack exchange，提问作者Arun Mathew