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 强制 chrome 刷新。
不确定，但我猜是 fadeTo 上的动画起到了作用
在 jsfiddle 上尝试该行。

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

Answer 3

您可以添加溢出和浮动属性：

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