IE 边缘：使用 pseudo-elements 时单元格之间的间隙

Question

我有一个巨大的 table（大约 2000 行，60 列）并且每个单元格上都有一个标题。空单元格上的标题长约 40 字节。所以创建的网页很大。我想减小网页的大小。因为我可以在 class 中设置标题，所以我尝试用伪元素来解决它。看我的fiddlehere

"info" 是我的工具提示/"title" 属性

第一个table:

<td><span info>Content</span></td>

秒table:

<td info>Content</td>

第二个table是单元格之间的空隙。为什么？

Answer 1

您将 [info] 设置为 display: inline-block;。这对 span 没问题，但是当你把 info 属性放在 TD 上时，这当然会弄乱 table 布局，因为 TD 必须有 display: table-cell.

仅当您希望它存在时才将 inline-block 移动到 span[info]：

[info] {
  position: relative;
  cursor: help;
  padding: 4px;
}
span[info] {
  display: inline-block;
}

演示： http://jsfiddle.net/gL30qujr/3/

IE edge: gaps between cells when using pseudo-elements