<!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' 空白規則を使用してフォーマットされます。
height()
複数行の td を含む行が挿入と同じ呼び出しで計算される場合、IE8 は 1 行 (21 ピクセル) を誤って報告します。同じ呼び出しが非同期で行われた場合、IE8 は 2 行 (40 ピクセル) を正しく報告します。
IE9/10/Safari/Chrome/Firefox で問題ありません。