Chrome中的Jquery CSS问题

Question

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

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

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

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

1.在图像1中，填充为5％，标题和段落文本都在DIV中居中。

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

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

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

谢谢！

Answer 1

尝试将选择器更改为

$('#preview div')

Answer 2

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

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

我建议在这种情况下没有百分比工作。