IE edge：使用伪元素时单元格之间的间隙

Question

我有一张巨大的桌子（大约2000行，60列），每个单元格都有一个标题。 空单元格上的标题长约40字节。 所以创建的网页是巨大的。我想减少网页的大小。 我可以在课堂上设置标题，我试图用伪元素来解决它。 看我的小提琴here

“info”是我的工具提示/“标题”属性

第一张表：

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

第二张表：

<td info>Content</td>

在第二个表中是单元格之间的间隙。为什么呢？

Answer 1

您将[info]设置为display: inline-block;。这对于跨度很好但是当你在TD上放置info属性时，这当然会混淆表格布局，因为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/