为什么图像无法在IE8的DIV中显示

Question

我有以下HTML：

<!-- default stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css">

<!-- if ie version 9 or less -->

<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css">
<![endif]-->

<div id="subpageHeaderImageSection">
    <div id="subpageHeaderLeft">
        <img id="igm" src="theImages/subpageHeaderImage.png" />
    </div>
</div>

defaultStyle.css ：

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

defaultStyle_ie.css ：

#subpageHeaderImageSection {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px;
}
#subpageHeaderLeft {
    position: absolute;
    left: 0;
    top: 0;
    float: left;
    height: 100%;
    width: 100%;
    background: none;
}
#igm {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    top: 0;
    left: 0;
}

我必须为IE添加图像，因为还不支持background-size:属性。

如果我删除了display: none defaultStyle.css display: none显示内容，则IE8会正确显示它，但其他浏览器会完全拉伸图像。 如果我保留它，其他浏览器会正确显示它，但IE8根本不显示图像。

如何解决以上问题，使其适用于所有浏览器？

Answer 1

要控制大小（即<9），必须在CSS中使用filter属性

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/myimage.png', sizingMethod='scale');

并仍使用background-size。 在这种情况下，它将读取100％的背景大小并使用