背景图像不会出现在ie

Question

这适用于firefox和chrome：

<div id="popup" style="display: block;">
        <div id="contentWrapper">

            <div id="popHeader">
                <span id="popupQuestion">The  nature.</span>
                <a id="popupYes" href="#"> </a>
                <a id="popupNo" href="/">Leave</a>
            </div>
        </div>
    </div>


#contentWrapper {
background-image: url("http://bestcamctory.com/images/warning/warning_bg.png");
height: 100%;
position: relative;
width: 100%;
}

但即未显示背景图像。那是为什么？

Answer 1

IIRC，您可能需要为contentWrapper或popup div定义大小。

Answer 2

如果你的子元素绝对定位，那么#contentWrapper已经崩溃，因为文档的正常流程中没有元素告诉它有多高。 height: 100%是相对的：元素只会与其父元素一样高，默认情况下它的子元素高度（当前为0）。

您可以尝试解决此问题。

• 将最小高度添加到#contentWrapper（尝试以1em开头）
• 从一个或所有孩子身上移除绝对定位 元件。

您还可以尝试将height: 100%添加到每个祖先元素中。