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

我正在使用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; }