背景图像在 Firefox 中显示但在 IE 中不显示，可能是 z-index 问题答案

【问题标题】：Background image show in Firefox but not in IE, might be z-index issue背景图像在 Firefox 中显示但在 IE 中不显示，可能是 z-index 问题
【发布时间】：2013-03-15 23:12:59
【问题描述】：

我创建了一个站点，它可以在 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;
}

【问题讨论】：

为什么z-index: -999 ??这可能是问题所在。您是否尝试过给z-index: 1 或一些正值？
把宽度和高度放在IMG标签里，你没有在CSS中指定任何固定高度，auto或%对IE没有任何意义
边距顶部：-150%；如果没有任何最高价值将其重新显示在屏幕上，面板上似乎并不合适。您能告诉我们您的目标是什么吗？

标签： javascript css internet-explorer firefox z-index

【解决方案1】：

此外，如果打算让图像淡入，则需要在文档加载后将不透明度更改为 1。

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

这是一个有效的Fiddle

【讨论】：

【解决方案2】：

图像不可见，因为opacity: 0（使元素不可见）和margin-top: -150%; 对您的.panel 类。删除它们就可以了。

如W3C 中所述，margin 属性包括margin-top 和margin-bottom 指的是包含块的宽度（而不是高度），如果设置在percentages.

Working Fiddle

【讨论】：