Fiddle

Question

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

代码非常复杂但我设法创建了一个代码片段来重现问题：

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（您可以调整数字来测试它）。

我尝试使用循环延迟getWidth函数，同时返回0，但所有这一切都是锁定浏览器并最终返回0。任何想法我怎么能让IE10返回正确的宽度？

Answer 1

这显然看起来像IE10中的缺陷。我能够通过这样做来显示你的测量结果：

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

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

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

IE10问题与计算宽度

Fiddle

1 个答案: