jQuery CSS渲染-在Firefox中工作，而不是在Chrome中。

I'm using a jQuery slider to adjust the padding of a DIV containing paragraph text. As I increase the padding on all sides equally, it should force the enclosed paragraphs into an ever-narrower column, in the center of the page.

我使用jQuery滑动条来调整包含段落文本的DIV的填充。当我平均地增加两边的填充时，它应该将所包含的段落压缩到页面中心的一个更窄的列中。

This works in Firefox, but in Chrome the paragraph widths remain constant (i.e. they don't become narrower as the DIV's padding pushes in on them), so pushing the layout to the right.

这在Firefox中是可行的，但在Chrome中，段落宽度保持不变(也就是说，不会因为DIV的填充而变得更窄)，因此将布局向右推。

I've recreated the issue here: jsfiddle.net/ms3Jd. You can try it in Chrome and Firefox to see the difference.

我在这里重新创建了这个问题:jsfiddle.net/ms3Jd。你可以在Chrome和火狐上试试，看看有什么不同。

Any ideas on how to force Chrome to refresh the enclosed paragraphs?

对于如何强制Chrome刷新所附段落有什么想法吗?

3 个解决方案

#1

I know there are ways to force (or trick) Chrome to refresh/redraw/recalcuate the page elements, but don't know how to do it. Any ideas?

我知道有一些方法可以强迫(或欺骗)Chrome刷新/重绘/重新计算页面元素，但是我不知道怎么做。什么好主意吗?

Taken from here: How can I force WebKit to redraw/repaint to propagate style changes?

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

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

I quickly applied it here, but you should make it into a function: http://jsfiddle.net/thirtydot/ms3Jd/5/

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

#2

I'm using fadeTo to force chrome to refresh.
Not sure but I guess it's the animate on fadeTo that does the trick
try that line on jsfiddle.

我用fadeTo来强制chrome刷新。不确定，但我猜是fadeTo上的动画做了一些技巧在jsfiddle。

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

#3

You can add the overflow and float properties:

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

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

#1