div的一部分用tinyscrollbar隐藏，直到调整窗口大小

Question

我遇到了一个奇怪的问题

我创造了一个小提琴 http://jsfiddle.net/alexjamesbrown/oqu54cav

在源代码中，第153行有一个<li>元素，上面写着“这应该是可见的” 但是，在最初运行它时，它在滚动窗口中不可见。

如果我调整窗口大小，即使是一小部分，其余项目也会按预期显示

我很难看到a）导致这种情况的原因，以及b）为什么它会自行调整大小？

Answer 1

如果您关闭prettycheckable，您可以看到问题没有发生。我相信这种情况正在发生，因为滚动条插件会在之前读取div 的高度。复选框通过prettycheckable插件变大。因此设置div的高度，生成滚动条，然后使用另一个插件放大复选框。

现在，您正在为生成的元素设置高度样式。这些只有在javascript评估后才会发挥作用。为了解决这个问题，你需要在真正的html中设置元素的样式。例如，这解决了您的问题：

.overview li {
    height: 2.5em;
}

因为.overview li在复选框被“改进”之前存在，然后在生成它们时，它们不会使该元素更大。