Question

看看这个示例HTML（我的项目的一个愚蠢版本）：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .pagewrapper {
                width: 960px;
                height: 768px;
                margin: auto;
                border: 1px solid green;
                border-radius: 3px 3px 3px 3px;
                box-shadow: 2px 2px 2px 2px rgb(0, 153, 51);
            }
            .pagewrapperImg {
                background: url("http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg");
                background-size: 100% 100%;
            }
            </style>
    </head>
    <body style="overflow: scroll;">
        <div style="right: 0px; bottom: 0px; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;">
            <div style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                <div class="pagewrapper pagewrapperImg" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;">
                </div>
            </div>
        </div>
    </body>
</html>

这假设生成一个带背景图像的居中div。调整窗口大小时，它应该使用滚动条溢出。这适用于Firefox，但在IE和Chrome上，它会剪切div的顶部，如图所示。

enter image description here

为什么会发生这种情况，我该如何解决这个问题？

编辑：让我指出在整个项目中，此div中有UI元素，它们也会被剪裁（它不仅仅是图像）

Answer 1

在.pagewrapperImg添加

background-position:center center;

请拜托....不要使用inline样式!!

fiddle demo

绝对居中的div没有正确溢出

1 个答案: