如何移除IE中HTML表格的边框？单元格使用content属性样式

兄弟，我之前也碰到过IE这种离谱的渲染bug，结合你的情况，给你几个可行的解决方向：

1. 替换content:url()的实现方式（最推荐） #

IE对普通元素直接使用content属性的支持非常有限，这才是核心问题——Chrome能识别这种非标准用法，但IE会用奇怪的方式渲染，进而导致表格出现异常线条。你可以换成这两种更兼容的写法：

• 改用背景图：调整你的CSS，把content换成background-image，记得补充图片宽度（因为背景图不会自动撑开元素）：

.dm_active_image {
  height: 16px;
  width: 16px; /* 替换成你图片的实际宽度 */
  float: left;
  background-image: url('../Images/DM-Active.png');
  background-repeat: no-repeat;
  background-size: contain; /* 如果需要适配元素大小 */
}

• 直接使用<img>标签：在表格单元格里直接插入图片元素，CSS只保留布局相关属性：

<td><img src="../Images/DM-Active.png" class="dm_active_image"></td>

.dm_active_image {
  height: 16px;
  float: left;
  border: none; /* 确保图片没有默认边框 */
}

2. 修复表格在IE的默认渲染问题 #

如果暂时不想改图片插入方式，可以试试调整表格的CSS，强制消除IE的默认间隙和边框：

table {
  border-collapse: collapse; /* 合并边框 */
  border-spacing: 0; /* 消除单元格间距 */
  border: none;
}
td {
  padding: 0; /* 去掉单元格默认内边距 */
  border: none;
}
.dm_active_image {
  display: block; /* 强制元素为块级，避免IE的行内元素渲染bug */
}

3. 强制IE使用最新渲染模式 #

有时候IE会自动切换到兼容模式，导致很多奇怪的问题。在网页的<head>里添加这个meta标签，强制IE用最新的标准模式渲染：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

4. 改用伪元素实现content插入 #

如果一定要用content属性，试试把图片放到伪元素里（IE8及以上支持伪元素的content）：

.dm_active_image::before {
  content: url('../Images/DM-Active.png');
  float: left;
  height: 16px;
}

对应的单元格只需要加类即可：<td class="dm_active_image"></td>

你可以从第一个方案开始试，这个最彻底，毕竟IE对content的非标准用法支持本来就不靠谱。

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