Question

当我尝试使用gwtQuery计算元素的宽度（带边距）时，我最近遇到了一种奇怪的行为。目标是将给定元素的宽度（包括填充，边框和边距）作为某个父元素的子元素。这个父级可以为某些孩子定义特定的CSS规则，所以我克隆它，将我的元素添加到这个父级，调用.outerWidth(true)来获取宽度，最后从父级中删除克隆。

它适用于Chrome，Firefox和IE 10，但在IE 8上随机失败（输出0）。但是我注意到，如果我在将元素添加到DOM的那一刻之间放置“睡眠”，那一刻我获得外部宽度，它总是成功。

我显然不想保持这种睡眠。所以我的问题是，是否有人对如何解决这种行为有任何见解，甚至是实现同一目标的更好方法？

谢谢！

这是一段代码片段

private Integer computeTabWidth(IsWidget tab) {
    GQuery $tab = $("<li></li>").append($(tab).clone());

    $(containerPanel).append($tab);

    // IE 8 debug.
    sleep(100);

    Integer tabWidth = $tab.outerWidth(true);
    $tab.remove();

    return tabWidth;
}

private void sleep(int i) {
    long time = new Date().getTime() + i;

    while (time > new Date().getTime());
}

Answer 1

我认为这是一个reflow问题，尝试强制浏览器在阅读之前进行重排，用以下内容替换您的睡眠方法：

$tab.css("offsetHeight")

gwtQuery的outerWidth（true）和IE8在没有延迟的情况下无法正常工作

1 个答案: