Chrome 中 Jquery CSS 的问题答案

【问题标题】：Problems with Jquery CSS in ChromeChrome 中 Jquery CSS 的问题
【发布时间】：2012-02-13 17:47:00
【问题描述】：

我正在使用 jQuery 来允许用户动态更改包含文本的 DIV 的填充。

我正在使用一个范围滑块，它会触发以下内容来更新容器 DIV 的填充更改：

$('#preview > div').css('padding', ui.value + '%' );

在 Firefox 中，这可以正常工作，但在 Chrome 中，并非所有元素都被更新以反映新的填充。最简单的解释方法是用图片：

1. 在图 1 中，内边距为 5%，标题和段落文本都在 DIV 中居中。

2. 在图 2 中，我在文本周围平均增加了填充，这应该会导致标题和段落压缩成更窄的一列，但仍位于页面中心。如您所见，当我更改填充时，只有第一段被正确更新。

一旦完成，并且文本定位不正确，如果我更改另一个样式属性（例如更改标题字体），它会立即导致页面中的所有元素被刷新并正确定位。

我可以使用一个命令来强制 jQuery 重新计算 DIV 中每个元素的位置吗？

谢谢！

【问题讨论】：

如果您可以发布 html 将会很有帮助，因为它可能只是选择器。
我可以在 jsfiddle 中重新创建问题。在 Firefox 中运行代码，并使用滑块更改容器 DIV 的填充会使里面的段落相应地调整。在 Chrome 中做同样的事情，段落保持原来的宽度，然后向右推。 jsfiddle.net/ms3Jd
如果您使用 px 而不是 %，它适用于所有 div 还是仅适用于第一个？试图找出“%”是问题还是其他原因。
我更简洁地改写了这个问题，并在这里找到了答案：stackoverflow.com/questions/8927478/…

【解决方案1】：

尝试将选择器更改为

$('#preview div')

【讨论】：

【解决方案2】：

使用百分比进行填充可能会很棘手。尝试给 #preview 一个硬编码的宽度（例如 800 像素），看看会发生什么。 'padding' 是相对于所应用元素的父节点的 'width' 而言的。

当第一个 DIV 的填充增加时，它可能会增加包含元素的宽度，并且下一个 DIV 将有不同的填充计算。它可能取决于浏览器。

我建议在这种情况下不使用百分比。

【讨论】：