0

我的页面上的大图像出现问题，我似乎无法避免它在某些浏览器上导致滚动。到目前为止，我只能在 Safari 上看到它，但我的朋友显然也在 Chrome 上看到了它。

我所做的就是将图像绝对定位在其容器内，然后将其向右移动，使其实际上位于容器和包装器之外。问题是，它的图像相当大，因此在某些浏览器中，您可以向右滚动以显示图像的其余部分。这是代码。

<html>
<head>
    <style>
        body{
            background: aqua;
            margin: 0;
            overflow-x: hidden;
        }
        #wrapper{
            background: #fff;
            width: 960px;
            height: 100%;
            margin: 0 auto;
        }
        #content{
            width: 960px;
            height: 500px;
            background: yellow; 
            position: relative;
        }
        #image{
            position: absolute;
            bottom: 0;
            right: -320px;
            z-index: 0;
            width: 1210px;
            height: 468px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <div id="image"></div>
        </div>
    </div>
</body>
</html>

和继承人deomonstrates它的小提琴：http: //jsfiddle.net/alsweeet/5mqHf/

在 body 样式中添加 overflow-x:hidden 似乎可以解决大多数浏览器中的问题，但不是 safari。你会看到我还没有在fiddle demo中添加这个，一旦你添加了它，你将无法再左右滚动，这就是我试图实现跨浏览器的效果。

我肯定会对此提出一些建议。我敢肯定，可能有比绝对定位更好的方法来做到这一点。

谢谢！

也好

编辑：Chrome 上也出现问题，滚动条被隐藏，但您仍然可以横向滚动。尽管如此，在火狐中仍然可以正常工作。

编辑：这是一个屏幕截图，以帮助解释我在没有任何侧滚动的情况下要实现的目标。红色框是导致侧滚动的框。您可以看到红色框在 960 包装器之外。

在此处输入图像描述

4

3 回答 3

1

overflow-x: 不完全跨浏览器兼容，请尝试使用overflow:hidden;，只要您不需要在元素上垂直滚动，那么这永远不会给您带来问题。

在一个元素上设置溢出-y 并在另一个元素上限制溢出-x 的解决方法是这个小提琴。

http://jsfiddle.net/5mqHf/7/ - 修复图像位置

对此的一个考虑是，如果您要垂直滚动，当查看图像元素的宽度时，您需要考虑滚动条的 wdtih 以避免水平滚动条，这通常在 15px 和 30px 之间变化，具体取决于浏览器。

于 2012-10-09T11:56:07.160 回答
1

这就是你要找的东西？

演示

http://jsfiddle.net/5mqHf/4/

于 2012-10-09T12:25:19.570 回答
0

请看一看。是否符合您的要求。如果没有，请告诉我，以便我可以尝试更多。

演示

http://jsfiddle.net/saorabhkr/FyJ4F/

于 2012-10-09T12:12:22.947 回答