0

ページ上の大きな画像に問題があります。特定のブラウザでスクロールが発生するのを避けることができないようです。これまでのところ、Safari でしか表示できませんが、友人は Chrome でも表示されているようです。

私がやっているのは、画像をコンテナ内に絶対に配置してから、実際にコンテナとラッパーの外側になるように右に移動することだけです。問題は、画像が非常に大きいため、一部のブラウザーでは右にスクロールして画像の残りの部分を表示できることです。これがコードです。

<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: hiddenを追加すると、ほとんどのブラウザーで問題が解決するようですが、サファリでは解決されません。これをまだフィドル デモに追加していないことがわかります。一度追加すると、左右にスクロールできなくなります。これは、クロス ブラウザーを実現しようとしている効果です。

これに関するアドバイスをいただければ幸いです。絶対に配置するよりも、これを行うためのより良い方法がおそらくあると確信しています。

ありがとう！

アルスウィート

編集:Chromeでも問題が発生しています。スクロールバーは非表示になっていますが、横にスクロールできます。ただし、Fire fox では問題なく動作します。

編集：サイドスクロールなしで何を達成しようとしているのかを説明するためのスクリーンショットがあります。赤いボックスは、横スクロールを引き起こしているボックスです。赤いボックスが 960 ラッパーの外側にあることがわかります。

ここに画像の説明を入力

4

3 に答える 3

1

これはあなたが探しているものですか？

デモ

http://jsfiddle.net/5mqHf/4/

于 2012-10-09T12:25:19.570 に答える
1

overflow-x: はクロス ブラウザーと完全に互換性があるoverflow:hidden;わけではありません。要素を垂直方向にスクロールする必要がない限り、を使用してみてください。問題が発生することはありません。

要素にoverflow-yを持ち、別の要素でoverflow-xを制限する回避策は、このフィドルです。

http://jsfiddle.net/5mqHf/7/ - 画像位置の修正

これに関する考慮事項は、垂直にスクロールする場合、画像要素の幅を見るときに、水平スクロール バーを避けるためにスクロールバーの wdtih を考慮する必要があることです。これは通常、ブラウザ。

于 2012-10-09T11:56:07.160 に答える
0

ご覧ください。それはあなたの要件に一致していますか。いいえの場合はお知らせください。もっと試してみることができます。

デモ

http://jsfiddle.net/saorabhkr/FyJ4F/

于 2012-10-09T12:12:22.947 に答える