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;
}