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

Question

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

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

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

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

Answer 1

我知道有办法强制（或欺骗）Chrome刷新/重绘/重新计算页面元素，但不知道如何操作。 有任何想法吗？

从这里开始： 如何强制WebKit重绘/重绘以传播样式更改？

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强制刷新铬。
不确定，但我猜这是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;
}