IE8在DIV之外延伸背景图像

Question

<div id="subpageMain">    
<div id="subpageHeaderImageSection">
    <div id="subpageHeaderLeft">
    </div>
</div>
</div>

#subpageHeaderImageSection {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
}
#subpageHeaderLeft {
    position: absolute;
    left: 0;
    top: 0;
    float: left;
    width: 100%;
    height: 100%;
    background: url('../theImages/subpageHeaderImage.png') no-repeat;
    background-size: 100% 100%;
}

#subpageMain {
    position: relative;
    margin-left: 295px;
    margin-right: 10px;
    padding-bottom: 43px;
    top: 50px;
 }

这就是我所看到的：

为什么IE8会拍摄背景图片并将其拉得太大以至于正确的内容无法显示并离开屏幕？

我该如何解决？

Answer 1

IE8不支持CSS background-size属性（请参阅the compatibility table at MDN）。要支持IE8，您需要使用<img>元素并设置max-width: 100%; max-height: 100%;。

Answer 2

IE8无法拉伸div的背景。但是，看起来ID为#subpageHeaderLeft的div会向右延伸，因为它有width:100%