Question

由于某些原因，在加载页面后尝试使用JavaScript更改填充权限值时，文档正文填充在显示时无法正确更新。看看这个小提琴演示了这个问题。

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中也能顺利运行。

Answer 1

它以某种方式连接到页面加载过程。除非您知道页面已完全加载，否则您无法真正希望成功运行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测试）完全一致。

Answer 2

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

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等浏览器的开销，这对于动画主体填充没有任何问题。另外，我不确定这样的东西是否可以用于非块元素，但在我的情况下我不需要担心。

Chrome中奇怪的文档正文填充问题

2 个答案: