jQuery CSS渲染 - 适用于Firefox，而不适用于Chrome

Question

我正在使用jQuery滑块来调整包含段落文本的DIV的填充。当我平均增加所有边上的填充时，它应该将封闭的段落强制在页面中心的一个更窄的列中。

这适用于Firefox，但在Chrome中，段落宽度保持不变（即它们不会随着DIV的填充推入它们而变窄），因此将布局推向右侧。

我在这里重新创建了这个问题：jsfiddle.net/ms3Jd。你可以在Chrome和Firefox中试用它来看看差异。

有关如何强制Chrome刷新所附段落的任何想法？

Answer 1

  

我知道有办法强制（或欺骗）Chrome   刷新/重绘/重新计算页面元素，但不知道该怎么做   它。有什么想法吗？

从这里采取：How can I force WebKit to redraw/repaint to propagate style changes?

sel.style.display='none';
sel.offsetHeight; // no need to store this anywhere, the reference is enough
sel.style.display='block';

我在这里快速应用了它，但你应该把它变成一个函数：http://jsfiddle.net/thirtydot/ms3Jd/5/

Answer 2

我正在使用fadeTo强制刷新Chrome 不确定，但我猜这是fadeTo上的动画制作技巧 在 jsfiddle 上尝试该行。

$('#preview > div').css('padding', ui.value + '%' ).children('p').fadeTo(1, .99).fadeTo(1, 1);

Answer 3

您可以添加overflow和float属性：

#preview > div {
    padding: 5%;
    overflow: auto;
    float: left;
}