[英]Why image doesn't show up within a DIV in IE8
I have the following HTML: 我有以下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 : 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 : 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;
}
I had to add an image for the IE because the background-size:
property is not yet supported. 我必须为IE添加图像,因为还不支持background-size:
属性。
If I remove the display: none
from the defaultStyle.css
, the IE8 shows it correctly but the other browsers stretches the images fully. 如果我删除了display: none
defaultStyle.css
display: none
显示内容,则IE8会正确显示它,但其他浏览器会完全拉伸图像。 If I keep it, the other browsers displays it correctly but IE8 doesn't display the image at all. 如果我保留它,其他浏览器会正确显示它,但IE8根本不显示图像。
How do I fix the above so it works for all browsers? 如何解决以上问题,使其适用于所有浏览器?
To control size in ie < 9 you must use the filter property in css 要控制大小(即<9),必须在CSS中使用filter属性
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/myimage.png', sizingMethod='scale');
and still use background-size. 并仍使用background-size。 It will read the background-size of 100% in this case and use it 在这种情况下,它将读取100%的背景大小并使用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.