我使用Mustache生成一些HTML并使用insertAdjacentHTML将其放在页面上。它显然转换为DOM结构，因为我可以通过使用document.querySelector('.contentarea')调用来获取它的句柄。但是，如果我尝试获取宽度或高度的像素值，它会不断抛回'auto'。
认为这可能只是getComputedStyle的问题，我尝试使用.getBoundingClientRect和.offsetWidth代替。两者都返回0。如果我通过将调用放在setTimeout(function(){}, 1)内稍微延迟调用，它就有效，但这对我的生产代码来说不实用，因为它需要进入同步构造函数。
在Firefox（Aurora）和Chrome中都会发生这种情况。 我记得读过一篇关于Mozilla如何通过使用惰性框架构造改进DOM操作性能的文章，并认为框架可能存在一些错误太懒惰，但是因为它也发生在Chrome中，所以似乎不太可能。
有没有人对这里发生的事情或如何解决这个问题有任何想法？插入HTML后，我确实需要像素高度/宽度信息。
PS：是否有任何浏览器在单独的线程中进行HTML解析/构建？我在想这可能会导致这种行为。
NEVERMIND：这是我自己的错。我刚刚没有注意到在代码尝试获取测量值之前设置的display: none;样式。
答案 0 :(得分：9)
有几件事可能导致“自动”的结果。你找到了其中一个; display: none。如果元素是内联的，它也将返回auto。
基本上它必须是block或inline-block元素，并且必须呈现。
答案 1 :(得分：0)
根据我的经验，许多浏览器（IE，Chrome，Firefox）故意延迟计算布局，直到Javascript线程结束或通过超时调用结束。
我知道的唯一解决方案是屈服于浏览器然后重新启动。您使用setTimeout的方法效果很好。