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，则IE8会正确显示，但其他浏览器会完全展开图像。如果我保留它，其他浏览器会正确显示它，但IE8根本不显示图像。

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

Answer 1

控制尺寸，即＆lt; 9你必须在css

中使用filter属性

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

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

为什么图像不会出现在IE8中的DIV中

1 个答案: