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

Posted 2023-03-06

【中文标题】jQuery CSS 渲染 - 适用于 Firefox，不适用于 Chrome

【英文标题】：jQuery CSS rendering - works in Firefox, not in Chrome

【发布时间】：2012-02-14 04:42:26

【问题描述】：

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

这在 Firefox 中有效，但在 Chrome 中，段落宽度保持不变（即，当 DIV 的内边距压入它们时，它们不会变窄），因此将布局推到右侧。

我在这里重现了这个问题：jsfiddle.net/ms3Jd。你可以在 Chrome 和 Firefox 中试一试，看看有什么不同。

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

【问题讨论】：

在我看来像一个 WebKit 错误。

可能 - 但我知道有办法强制（或欺骗）Chrome 刷新/重绘/重新计算页面元素，但不知道该怎么做。有什么想法吗？

【参考方案1】：

我知道有一些方法可以强制（或欺骗）Chrome 刷新/重绘/重新计算页面元素，但不知道怎么做 它。有什么想法吗？

取自这里：How can I force WebKit to redraw/repaint to propagate style changes?

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/

【讨论】：

一个jQuery插件版本：jsfiddle.net/thirtydot/ms3Jd/7。可能是矫枉过正..

它有效 - 谢谢你（和其他回答者） - 你是个天才！

【参考方案2】：

我正在使用 fadeTo 强制 chrome 刷新。 不确定，但我猜是 fadeTo 上的动画可以解决问题 在 jsfiddle 上尝试该行。

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

【参考方案3】：

你可以添加overflow和float属性：

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

【讨论】：

嗯……这就是进步，让我们走到了一半。谢谢。我在 jsfiddle 中尝试过——当我们增加填充时，段落会重新计算。但是如果我们再次减小填充，它们就不会再次变宽。您可以提供任何进一步的改进吗？