css – IE8修复了background-size属性？视网膜图像

我正在使用以下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;
}

原文地址：https://www.jb51.cc/css/217209.html