0

ウェブサイト: http://dev.blackboxdesign.co

Chrome でかなりイライラする問題が発生しています。Chrome で最初にページを開くと、ナビゲーション バーがバナー バーを無視して一番上に表示され、バナーの下に隠れます。この問題は、ホームページのリンクをクリックすると自動的に修正されますが、更新すると再び表示されます。Chrome が検出された場合は、強制的にリロードしようとしました (ただし、ループを作成しただけなので、それほどスマートではありませんでした)。バナーdivにパディングを追加してみました

    padding-bottom:1px;

しかし、今回はバナーが表示されないことを除いて、同じ問題が発生します。ここで、同じ問題を抱えている誰かが、画像サイズが必要なChromeに関係していると言っていました。しかし、ページの幅によって画像サイズが変化するため、画像サイズを定義できません。

HTML

    <div class="slideshow">
        <div id="banner_bar1"><img src="images/banner5.jpg" width="750px" height="178px" class="banner"></div>
        <div id="banner_bar2"><img src="images/banner4.jpg" width="750px" height="178px" class="banner"></div>
        <div id="banner_bar3"><img src="images/banner3.jpg" width="750px" height="178px" class="banner"></div>
        <div id="banner_bar4"><img src="images/banner2.jpg" width="750px" height="178px" class="banner"></div>
    </div>

CSS

#banner_bar1 {
    margin-top: 0px;
    width: 100%;
    background-color:#313131;
}
/* repeat #banner_bar1 for 2,3,4 changing only background-color */
.slideshow {
    margin:0px;
    padding:0px;
}
.banner {
    display:block;
    max-width: 1300px;
    min-width: 750px;
    width: 90%;
    margin: 0px auto;
}

ああ、次のおかげで、ウィンドウのサイズ変更でも問題が解決することを忘れていました。

    <script language="javascript" type="text/javascript">
        function Reload(){
            window.location.href = window.location.href
        }
        window.onresize = Reload;
    </script>
4

2 に答える 2

3

の.banner子には絶対位置が適用されているため、おそらく使用しているサイクル プラグインによって、これらの要素はドキュメント フローの一部を形成しません。つまり、これらの div と子画像はコンテナに.slideshow高さを与えません。.slideshow

相対的に配置された要素は、ドキュメント内の要素の通常の流れにあると見なされます。対照的に、絶対配置された要素はフローから除外されるため、他の要素を配置するときにスペースを占有しません。

https://developer.mozilla.org/en-US/docs/CSS/positionを参照してください

選択した開発者ツールを見ると、.slideshowdiv の高さがゼロ ピクセルであることがわかります。div をフローティングしていた場合も同じことが起こったはずです.banner。それが私が尋ねた理由です。開発者ツールを使用してページを作成していない場合は、お気に入りのブラウザのドキュメントを参照することをお勧めします. 特に Chrome には優れたツールがあり、Opera のトンボと Mozilla (組み込みの開発者ツールと優れた Firebug 拡張機能の両方) は、非常に名誉ある言及を得ています。

.banner要素は親コンテナーを引き伸ばして高さを与えることはないため.slideshow、内容に合わせて高さを手動で指定する必要があります。この場合215px、私のコメントに従って unit の使用に注意してください。単に述べて215も機能しないか、少なくともクロスブラウザーでは正しく機能しません。

次のように編集して外部CSSファイルでこれを行うことをお勧めします-

#banner_bar1 {
    margin-top: 0;
    width: 100%;
    background-color: #313131;
}

/* repeat #banner_bar1 for 2,3,4 changing only background-color */
.slideshow {
    height: 215px;
    margin:0px;
    padding:0px;
}

.banner {
    display:block;
    max-width: 1300px;
    min-width: 750px;
    height:100%;
    width: 90%;
    margin: 0 auto;
    padding-bottom: 0;
}

これには、コメントで言及した余白プロパティの更新も含まれます。

彼が答えの正しい方向を示していたので、defau1t の功績を称えます。

于 2013-02-10T20:40:20.140 に答える
1

overflow:hidden;バナーを含む div にCSS プロパティを追加できます。

.slideshow{overflow:hidden;}
于 2013-02-10T06:48:59.287 に答える