0

サイトを作成しましたが、Firefox では動作しますが、IE では動作しません。実際には背景画像がなくなっており、実際には div がなくなっているように見えます。また、z-index の問題である可能性もあります。助けてください :(

以下はHTMLコードです

<div id="wrapper">
    <!-- Home -->
    <div id="landing" class="panel">
        <img src="images/bgmain_no_producer.jpg" class="bg" />
    </div>
</div>

以下はCSSです

#wrapper {
    width: 90 % ;
    /*float:left;*/
    min - height: 100 % ;
    height: auto!important;
    height: 100 % ;
    margin: 0 auto 0px auto;
}
.panel {
    min - width: 100 % ;
    height: 100 % ;
    overflow - y: hidden;
    overflow - x: hidden;
    position: absolute;
    margin - top: -150 % ;
    margin - left: -5 % ;
    background - color: #555555;
    opacity: 0;
    z-index:0;
    -webkit-transition: opacity .6s ease-in-out;
    -moz-transition: opacity .6s ease-in-out;
    -o-transition: opacity .6s ease-in-out;
    -ms-transition: opacity .6s ease-in-out;
    transition: opacity .6s ease-in-out;
}

img.bg {
/* Set rules to fill background */
    min-width: 250px;
    left: 50%;
    margin-left: -50%;   /* 50% */
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
/* Set up positioning */
    position:absolute;
    top: 0;
    z-index:-999;
}
4

2 に答える 2

1

opacity: 0（要素を非表示にする）ため、およびクラスmargin-top: -150%;に対して画像が表示されません。.panelそれらを削除すると機能します。

W3Cで指定されているように、とmarginを含むプロパティは、 で設定されている場合、包含ブロックの幅(高さではありません) を参照します。margin-topmargin-bottompercentages

働くフィドル

于 2013-03-26T08:26:35.490 に答える
0

また、画像をフェード インさせることが意図されている場合は、ドキュメントが読み込まれた後に不透明度を 1 に変更する必要があります。

document.getElementById('landing').style.opacity = 1;

ここに働くフィドルがあります

于 2013-03-26T08:47:55.097 に答える