html - 为什么图像不显示在 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: 属性尚不支持。

如果我从 defaultStyle.css 中删除 display: none，IE8 会正确显示它，但其他浏览器会完全拉伸(stretch)图像。如果我保留它，其他浏览器可以正确显示它，但 IE8 根本不显示图像。

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

Answer 1

要在 ie < 9 中控制大小，您必须在 css 中使用 filter 属性

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

并且仍然使用背景大小。在这种情况下，它将读取 100% 的背景大小并使用它