文档正文溢出隐藏的问题

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>

我该如何解决此问题？

这是再次的链接。

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...最好的“body”，而不是尝试使用“html”是错误。

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

Answer 3

发生这种情况是因为您在点击点击此处链接时将body溢出hidden更改为auto。是否需要改变？

Answer 4

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

另外：您不必将图像放入

中 - 浏览器中的段落和图像处理之间可能存在一些交互。您可能想要删除

并看看会发生什么。