我的页面上有一个大图像，我似乎无法避免它在某些浏览器上引起滚动。到目前为止，我只能在Safari上看到它，但我的朋友显然也在Chrome上看到它。
我所做的就是将一张图片完全放置在它的容器内，然后向右移动它，这样它实际上就在容器和 Package 器的外面。问题是，这是一个相当大的图像，所以在一些浏览器中，你可以向右滚动显示图像的其余部分。这是密码
<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>这里有一把小提琴可以证明http://jsfiddle.net/alsweeet/5mqHf/
添加overflow-x：隐藏到身体风格似乎解决了大多数浏览器的问题，但不是safari。你会看到我还没有把这个添加到小提琴演示中，一旦你添加了它，你就不能再向左或向右滚动了，这是我试图实现跨浏览器的效果。
我很感激你能给我一些建议。我相信可能有一个更好的方法来做到这一点，而不是绝对定位。
谢谢！
阿尔斯韦
编辑：问题也发生在Chrome上，滚动条被隐藏，但你仍然可以横向滚动。在火狐中仍然工作得很好。
编辑：这里有一个截图，以帮助解释我试图在没有任何侧滚动的情况下实现什么。红色框是导致侧滚动的框。您可以看到红色的盒子在960 Package 的外面。
3条答案
按热度按时间8i9zcol21#
这就是你要找的吗？
DEMO
http://jsfiddle.net/5mqHf/4/
41ik7eoe2#
overflow-x：不是完全跨浏览器兼容的，尝试使用
overflow:hidden;，只要你不需要在元素上垂直滚动，那就永远不会给你带来问题。一种变通方法是在一个元素上使用-y溢出，而在另一个元素上限制-x溢出。
http://jsfiddle.net/5mqHf/7/-修复图像位置
一个考虑是，如果你要垂直滚动，当查看图像元素的宽度时，你需要考虑滚动条的宽度，以避免水平滚动条，这通常在15 px和30 px之间变化，具体取决于浏览器。
swvgeqrz3#
请看一下。是否符合您的要求。如果没有，请告诉我，这样我就可以尝试更多。
DEMO
http://jsfiddle.net/saorabhkr/FyJ4F/