html - 背景图像没有出现在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%;
}

但是在 ie 上没有显示背景图像。这是为什么？

Answer 1

如果您的子元素是绝对定位的，那么 #contentWrapper 就会折叠，因为在正常的文档流中没有元素可以告诉它应该有多高。 height: 100% 是相对的:该元素将仅与其父元素一样高，默认情况下也仅与其子元素(当前为 0)一样高。

您可以尝试一些方法来解决这个问题。

• 将最小高度添加到 #contentWrapper(尝试从 1em 开始)
• 移除一个或所有 child 的绝对定位 元素。

您也可以尝试向每个祖先元素添加 height: 100%。