IE10 计算宽度的问题

Question

我在使用 IE10 中的 tableview 时遇到问题。出于某种原因，IE10 会在单元格绘制到屏幕上之前尝试测量单元格的宽度，而其他浏览器则不会。在 IE10 和其他版本/浏览器中放置断点时可以清楚地看到差异。

代码非常复杂，但我设法创建了一个重现问题的 sn-p：

var cells = 40;
var rows = 1000;

console.clear();

function measure(obj) {
    obj = $(obj);
    console.log(obj.getWidth());
}

var randomNumber = function (scale, offset) {
    scale = scale || 10;
    offset = offset || 50;
    return (Math.floor(Math.random() * 11) * scale) + offset;
};

var output = "<table><thead><tr>";

for (var i = 0; i < cells; i++) {
    output += "<th width='" + randomNumber() + "'></th>";
}
output += "</tr></thead><tbody>";
for (var j = 0; j < rows; j++) {
    output += "<tr>";
    for (var i = 0; i < cells; i++) {
        output += "<td></td>";
    }
    output += "</tr>";
}

output += "</tbody></table>";

// Insert into DOM.
$(document).body.insert(output);

// Measure the elements.    
$$('th').each(measure);

Fiddle

现在，根据列和行的数量，IE10 将返回正确的宽度，或者当更复杂时，它会为所有返回 0（您可以调整数字来测试这一点）。

我尝试在返回 0 时使用循环延迟 getWidth 函数，但所做的只是锁定浏览器并最终也返回 0。 有什么想法可以让 IE10 返回正确的宽度吗？

Answer 1

这显然是 IE10 中的一个缺陷。我可以通过这样做来显示您的测量结果：

setTimeout(function () {
    $$('th').each(measure);
}, 1000);

看起来好像 IE10 正在对元素进行某种延迟渲染，并且在布置新元素之前正在执行测量函数。

显然不是一个理想的解决方案，但它可能会给你一些想法。