5

だから私は今のように私のウェブデザインに画像スライダーを追加しました. IE + Chrome では問題なく動作しましたが、firefox では非常に奇妙な問題が発生しました。画像スライダーの画像がページの右側に押し出されていました。

ここに画像の説明を入力

次のようになります。

ここに画像の説明を入力

なぜこれが起こっているのか本当にわかりません。

スライダーの CSS は次のとおりです。

    <style type="text/css">
        #slider {
            position: relative;
            width: 918px;
        }
        #slider .viewer {
            position: relative;
            width: 918px;
            height: 200px;
            overflow: hidden !important;
        }
        #slider .viewer .reel {
            display: none;
            height: 200px;
        }
        #slider .viewer .reel .slide {
            width: 918px;
            height: 200px;
        }
    </style>

そして、スライダーの周りのコンテナーの css:

#photobox {
border-left: 1px solid #ababab;
border-right: 1px solid #ababab;
position: relative;
width: 918px;
height: 200px;
z-index: -1;
top: -6px;
}

これは本当に私を困惑させています。サイトのライブ バージョンもご覧いただけます - http://simplesolutions.netne.net/

4

4 に答える 4

8

これは浮遊する問題です:

#slider {  float:left }

それを修正する必要があります。

于 2012-12-13T04:20:17.777 に答える
5

に追加clear:bothする#slider .viewerと、それが処理されるようです。

于 2012-12-13T04:18:22.583 に答える
0

Margin-top : 6px#photobox で Firefox で修正します。

于 2012-12-13T04:18:20.677 に答える
0

同じタイプのレイアウトで同じ問題が発生しました (Firefox のみ)。問題は、ナビゲーション メニュー項目の margin-bottoms であり、その下のコンテンツ div が右に押し出されていることがわかりました。

トリッキーな部分は、ナビゲーション メニュー自体の下部に余白がないことでした。そのため、下のコンテンツに干渉するべきではないように見えました (Firefox だけで、他のブラウザーではそうではありませんでした)。 、ある時点で、リスト項目（メニュー項目）自体にメニューバーの下に伸びる余白の下部があることに気付き、それらを削除して修正しました。

于 2014-01-22T02:05:40.813 に答える