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を除いて、画像の右側の部分が切り取られます。理由は何で、どのようにして異なるブラウザで同じように表示できるのだろうか。

問題を明確にするために、オーバーフローのない同様のコードを次に示します-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 に答える