Question

我有一个带有特殊颜色编码范围的表，用于指定表中行的状态。 CSS似乎在Chrome和FF中呈现得很好，但在IE中，红色跨度似乎没有正确呈现height:100%。我注意到它与添加到td和button的填充有关。就好像IE在检查子元素的填充之前计算height:100%。

请在此处转载此处：http://jsfiddle.net/vkjbu3cd/1/

更新

之后再看一些。我发现IE中没有计算行内其他元素（即按钮）的填充。如果我填充<button> 0，则Chrome和IE都将<td>高度计算为20px。但是如果我把填充物放回按钮上，那么Chrome现在将<td>高度计算为32px，其中IE仍在计算20px ....为什么IE必须这样做!!!？！？

Answer 1

很奇怪。

黑客可以在blob添加一个可笑的大高度：

.blob {
  height: 500%;
}

由于其td家长已overflow:hidden，因此不会造成问题。

<强>更新

鉴于blob可能包含内容，您可以遍历所有blob元素，并将其高度编码为：

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

在使用IE 11时填充导致渲染问题

1 个答案: