Question

样品：

<!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中。

非常感谢提前！

麦克

Answer 1

嘿，现在习惯vertical align top

img{
vertical-align:top;
}

现场演示http://tinkerbin.com/GHQc5Qr7

在你的css中定义你的重置css

更新了演示http://tinkerbin.com/bwNH5c0I

更多信息 http://meyerweb.com/eric/tools/css/reset/

滚动条删除图像的右侧部分

1 个答案: