為什么圖像無法在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％的背景大小並使用