我正在使用以下CSS Retine图像,它在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？
非常感谢任何帮助:-)
解决方法
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及更低版本的标准背景图像.
使用保罗·爱尔兰的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')";
}
.ie6 .arrow-big-right,.ie7 .arrow-big-right,.ie8 .arrow-big-right {
background-image: none;
}
