0

样本：

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

提前谢谢了！

麦克风

4

1 回答 1

0

嘿，现在习惯了vertical align top

img{
vertical-align:top;
}

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

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

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

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

于 2012-07-06T04:29:10.600 回答