Css 填充导致<；中出现渲染问题；td>；使用IE11

我有一个带有特殊颜色编码范围的表，用于指定表中某一行的状态。CSS在Chrome和FF中的渲染效果似乎很好，但在IE中，红色范围似乎没有正确渲染高度：100%。我注意到这与添加到

td

和

按钮的填充有关。在检查子元素的填充之前，就好像IE计算了高度：100%

请参阅此处转载的内容：

更新

再看一眼。我发现行内其他元素（即按钮）上的填充不是由ie计算的。如果我对

0进行填充，则Chrome和ie都将

高度计算为20px。但是如果我把填充物放回按钮上，Chrome现在计算的高度是32px，IE仍然计算的是20px。。。。为什么我要这么做

非常奇怪

一个骇客会在

blob

上添加一个大得可笑的高度：

.blob {
  height: 500%;
}

由于它的

td

父级具有

溢出：隐藏

，因此不会导致问题

更新

考虑到

blob

可能有内容，您可以迭代所有

blob

元素，并按如下方式硬编码它们的高度：

var blob = document.querySelectorAll('.blob');
for(var i = 0 ; i < blob.length ; i++) {
  blob[i].style.height= blob[i].parentNode.offsetHeight+'px';
}

var blob=document.querySelectorAll（'.blob'）；
对于（变量i=0；i

我实际上也想到了这一点。。但是，IRL我在

.blob

中有一些文本，如果我这样做，这些文本将无法正确地垂直居中。我将尝试在使用你的黑客攻击时将其居中。无论如何。。。这看起来像是一个应该报告的bug吗？我无法想象IE所做的与HTML5规范是一致的。我同意这是一个bug，但我不知道报告能完成任何事情。哈哈。。考虑到微软的背景，我不得不同意你的看法，我接受了，因为你的回答确实解决了眼前的问题。不幸的是，我的代码IRL更复杂，需要更多的工作才能正确渲染。