5

由于某种原因，在页面加载后尝试使用 JavaScript 更改 padding-right 值时，文档正文右填充无法正确更新。看看这个演示这个问题的小提琴。

HTML

<html><body><div></div></body></html>

JavaScript

// Workaround #1: changing right padding without timeout
//$(document.body).css('padding-right', '100px');
setTimeout(function () {
    // This doesn't work properly (at least for me) in Chrome on Ubuntu 12.04
    $(document.body).css('padding-right', '100px');
    // Write info in body that function was executed
    $(document.body).append('timeout function executed');
    // Workaround #2: write content into div
    //$('div').append('timeout function executed');
    // Workaround #3: set document body display to none and back to block via zero ms timeout
    /*$(document.body).css('display', 'none');
    setTimeout(function () {
        $(document.body).css('display', 'block');
    }, 0);*/
}, 1000);

http://jsfiddle.net/gyqEK/2/

有一些变通方法我能够使右填充的更改有效

  • 调整浏览器窗口大小
  • 将文档正文显示切换为无，并通过零毫秒超时功能返回阻止
  • 将一些 HTML 内容写入 div（在小提琴示例中）

我尚未在 Windows Chrome 上对此进行测试，但在 Ubuntu 12.04 Chrome 版本 24 上我能够重现此问题。在 Firefox 上不会出现此问题。其他人面临同样的问题，有人可以确认这是否也发生在其他操作系统和/或 Chrome 版本上？

更新

我更新了一个新的小提琴，它现在更接近我想要实现的原始想法。当“某事”完成时（在这种情况下单击 div），我希望文档正文右填充以或多或少的平滑动画变化。这在 Firefox 中完美运行，但无法在最新的 Chrome 中运行。

$('div').click(function () {
    var jqBody = $(document.body);
    if (jqBody.css('padding-right') !== '200px') {
        jqBody.animate({
            'padding-right': '200px'
        }, 500);
    } else {
        jqBody.animate({
            'padding-right': '0'
        }, 500);
    }
});

http://jsfiddle.net/gyqEK/5/

更改文档正文右填充是否有意义是另一个问题。我的目标是将所有页面内容从右边缘移动 200 像素，以便为绝对定位的侧边栏 div 元素保留一些空间。我通过将页面内容包装到 div 元素中来实现这一点，而不是 body padding-right 我现在正在更改包装器 div 元素的右边距。这种方法在 Chrome 中也可以顺利运行。

4

2 回答 2

0

它以某种方式连接到页面加载过程。除非您知道页面已完全加载，否则您不能真正希望成功运行 JQuery。您需要确保所有 Jquery 在初始“就绪”事件之后运行。

如果你用这个替换你的代码：

$(document).ready(function(){
    setTimeout(function () {
        $(document.body).css('padding-right', '100px');
        // Write info in body that function was executed
        $(document.body).append('timeout function executed');
       },1000);
});

...它在 Chrome 以及其他浏览器中完全按照预期工作（在 Ubuntu 12.04 上测试了 Firefox 和 Chrome）

于 2013-02-08T21:45:36.017 回答
0

两年前有人偶然发现了同样的错误，这个解决方案对我有用。

https://stackoverflow.com/a/3485654/1532332

我无法相信为什么 Chrome 没有解决这个问题。无论如何，这是一个更新的小提琴，其中填充动画也适用于 Chrome。代码可能更干净，但我懒得整理：）

$('div').click(function () {
    var jqBody = $(document.body);
    if (jqBody.css('padding-right') !== '200px') {
        jqBody.animate({
            'padding-right': '200px'
        }, {
            duration: 500,
            step: function () {
                this.style.display = 'none';
                this.offsetHeight;
                this.style.display = 'block';
            }
        });
    } else {
        jqBody.animate({
            'padding-right': '0'
        }, {
            duration: 500,
            step: function () {
                this.style.display = 'none';
                this.offsetHeight;
                this.style.display = 'block';
            }
        });
    }
});

http://jsfiddle.net/gyqEK/6/

这里肯定有一个缺点。在每个动画步骤中，元素的显示切换为无，读取 offsetHeight 并将显示切换回块。这也会导致诸如 Firefox 之类的浏览器的开销，这些浏览器在动画主体填充方面没有任何问题。另外，我不确定这样的东西是否可以用于非块元素，但在我的情况下我不需要担心。

于 2013-02-11T23:56:06.843 回答