Question

从question获得正确答案后，我遇到了另一个问题 - 在页面中添加margin:0em auto;会导致页面“跳跃”

.align-center-public {
    width:1000px;
    margin:0em auto;
    overflow:hidden;
}

<div id="container">

    <div class="align-center-public">

        <p style="width:800px; text-align:center; border:1px solid #000;"><a href="#">Please scroll down until you see the click button</a></p>
        <p><img src="winnie-the-pooh-2011-9.jpg" alt="test"/></p>
        <p><img src="winnie-the-pooh-2011-9.jpg" alt="test"/></p>
        <p><img src="winnie-the-pooh-2011-9.jpg" alt="test"/></p>
        <div><a href="#" class="get-photo">click here</a></div>
        <p><img src="winnie-the-pooh-2011-9.jpg" alt="test"/></p>

    </div>

</div>

我该如何解决这个问题？

以下是link。

Answer 1

修改

if ($.browser.msie && parseInt($.browser.version) < 9) $('html').css('overflow', 'hidden'); $('body').css('overflow', 'hidden').css('padding-right','17px');

和

if ($.browser.msie && parseInt($.browser.version) < 9) $('html').css('overflow', 'auto'); $('body').css('overflow', 'auto').css('padding-right', 0);

现在我注意到这显然是你所需要的。

http://jfcoder.com/test/pooh.html

要在滚动条消失时防止页面纠正，您需要适当填充BODY。对于每个浏览器，这很可能是不同的值。以上我在FF6，IE8 / 9和Chrome上测试过最新版本。

Answer 2

尝试javascript pure ...最好的'body'，而不是尝试使用'html'是bug。

<script>
document.body.style.overflow = 'hidden';
</script>

Answer 3

这种情况正在发生，因为您正在将body溢出hidden更改为明确auto链接上的click here。是否需要更改？

Answer 4

看起来，当视口水平缩小时，图像会被重新显示，但只有在视口宽度缩小到某个设置宽度之后才会重新显示。这就是你获得闪光灯的原因。如何在图像周围添加更多边框，以便了解宽度是多少？

另外：您不必将图像放在＆lt; p＆gt; s中 - 浏览器中的段落和图像处理之间可能存在一些交互。您可能希望删除＆lt; p＆gt;并查看会发生什么。

文档正文溢出到隐藏的问题

4 个答案: