css - 使用 IE 11 在 <td> 中填充导致渲染问题

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

很奇怪。

一个 hack 是向 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';
}