html - IE8 将背景图像拉伸(stretch)到 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 会把背景图片拉伸(stretch)太多，导致正确的内容无法显示并超出屏幕范围？

我该如何解决？

Answer 1

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