javascript - 如何在动态设置时（在超时内）使列表项尊重 ul padding-right

Question

我面临的问题是，当尝试在 setTimeout 中运行的代码中设置元素的 padding-right 属性时，其中的li元素未正确调整大小。当我不在 setTimeout 内时，问题不会发生（或至少很少发生）。

有人可以确认这是一个webkit 错误还是指向解决方案？

我能够在 Chrome 和 Safari 中重现它。

我创建了 3 个场景（请使用 Chrome 和 Safari 进行测试）：

1. 在静态 css 中带有 padding-right 的 ul - 显然有效http://jsbin.com/ufifos/5/edit
2. 在 js 代码中设置了 padding-right 的 ul 不在 setTimeout 内 - 工作（大多数时候）见 jsbin.com/ekazow/1/edit
3. 在 setTimeout 内的 js 代码中设置了 padding-right 的 ul - 无法正常工作http://jsbin.com/uzorux/1/edit

padding-right 已设置，但li元素未正确重绘。浏览器调整大小（或几个调整大小）修复它。

基本上代码是

setTimeout(function(){

    document.getElementById('container').style.paddingRight = '20px';

}, 2000);

Answer 1

问题在于这条规则：

li {
   width: 100%;
}

它不在第一个“工作”测试中。删除它，它应该可以正常工作。您可能还需要设置display: blockli 。