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

Question

我面临的问题是，当尝试设置元素的 padding-right 属性时，在 setTimeout 中运行的代码中，其中的 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%;
}

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