示例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
a {display:block;}
img {border:0;}
</style>
</head>
<body>
<div>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>
除了在 Internet Explorer 和 Opera 中，图像的右侧部分被剪切。我想知道是什么原因以及它们如何在不同的浏览器中显示相同。
为了澄清问题，这里有一个没有overflow-x:hidden的类似代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {display:inline-block; height:200px; overflow:auto;}
a {display:block;}
img {border:0;}
</style>
</head>
<body>
<div>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>
现在你会看到一个不必要的水平滚动条，除了 IE 和 Opera。
非常感谢!
迈克
最佳答案
嘿，现在习惯了垂直对齐 top
img{
vertical-align:top;
}
现场演示 http://tinkerbin.com/GHQc5Qr7
在你的 css 中定义你的 reset css
关于css - 滚动条删除图像的右侧部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11355814/