异步 IE8/jquery 表格行高计算答案

【问题标题】：Asynchronous IE8/jquery table row height calculation异步 IE8/jquery 表格行高计算
【发布时间】：2017-10-08 16:27:39
【问题描述】：

<!DOCTYPE html>
<html>
<head>
  <title>Test IE8 pre calc</title>
</head>
<body>

<div id='inserthere'></div>
<p id="dump"></p>
<p id="dump2"></p>
</body>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>
  $(function () {
    var t = "<table style='white-space: pre;'><tr><td>abc def\nghi</td></tr></table>";

    $("#inserthere").append($(t));
    $("#dump").text($("tr").height());

    window.setTimeout(function () {
      $("#dump2").text($("tr").height());
    }, 0);
  });
</script>
</html>

在上面的代码中，我在运行时向 DOM 插入了一个表。该表使用“pre”空白规则进行格式化。

如果包含多行 td 的行的 height() 在与插入相同的调用中计算，则 IE8 错误地报告单行（21 像素）。如果异步进行相同的调用，IE8 会正确报告两行（40 像素）。

IE9/10/Safari/Chrome/Firefox 都可以。

【问题讨论】：

在关闭 </table> 之前有一个 <table>，尝试删除它。
听起来好像 IE8 的渲染速度不够快，尽管您似乎已经找到了解决方案。
@Flauwekeul - 很好发现。示例已修复 - 但遗憾的是不是问题。

标签： jquery html-table internet-explorer-8

【解决方案1】：

我还没有找到解决方法 - 所以答案是不要这样做。将回车符替换为 <br> 后，空格 'nowrap' 的工作方式类似。

【讨论】：