我使用以下CSS作为Retina图像,它在FF,Chrome,Safari中完美运行,但在IE中不。
是否有使用后台大小的IE修复程序 - 如果是,我该如何使用当前代码实现它?
CSS:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
background-repeat: no-repeat;
background-size: 42px 48px;
}
HTML
<div class="arrow-big-right"></div>
有人可以解释我如何为IE修复此问题吗?
非常感谢您的帮助: - )
答案 0 :(得分:39)
IE8及以下只是don't support background-size
所以你要么必须使用IE5.5以来支持的AlphaImageLoader Filter:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
background-repeat: no-repeat;
background-size: 42px 48px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}
或者使用targeting IE versions via CSS的某种方法为IE8及以下用户应用替代背景。
值得注意的是,as Matt McDonald points out,您可能会因使用此技术而看到两张图片。这是由IE过滤器添加背景图像引起的,而不是替换标准背景图像。要解决此问题,请使用首选方法(here's a method, my personal favourite)通过css定位IE,并删除IE8及更低版本的标准background-image
。
使用Paul Irish blog post的第一项技术来执行此操作,您可以使用以下内容:
.arrow-big-right {
display: block;
width: 42px;
height: 48px;
margin-bottom: 1.8em;
background-image: url(arrow-big-right.png);
background-repeat: no-repeat;
background-size: 42px 48px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}
.ie6 .arrow-big-right,
.ie7 .arrow-big-right,
.ie8 .arrow-big-right {
background-image: none;
}