css - 没有内容的 TD、TH 在 Internet Explorer 中始终为 0 高度

Question

我发现在 IE 中，如果 TD 或 TH 没有内容，它的大小将被视为 0 x 0 像素。在Chrome中，它的高度是根据行的高度来计算的，其高度是根据行的内容来确定的。

我意识到这一点是因为我试图向没有内容的 TH 元素添加一个 :after 伪元素。在 Chrome 中，伪元素跨越行的高度，但在 IE 中，它只有几个像素高。

我尝试在 TD 中放置一个  ，这让我成功了，但是因为我的 TH 的行跨度为 2，IE 只计算了 1 行文本的高度，不是行的全高。

这是可以在 IE 中解决的问题吗？

.test
{
    position: relative;
}

.test:after
{
    width: 5px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    display:block;
    content: ' ';
    background-color: #007bff;
}

Answer 1

只需插入:

 

到空的 TD 或 TH 元素。