IE8 修复了背景大小的属性?视网膜图像

Question

我正在为Retina图像使用以下CSS，它在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 解决此问题吗？

非常感谢任何帮助：-）

Answer 1

IE8及更低版本根本不支持background-size因此您将不得不使用自IE5.5以来一直支持的AlphaImageLoader过滤器：

.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')";
}

或者使用某种通过 CSS 定位 IE 版本的方法，为 IE8 及以下用户应用替代背景。

同样值得注意的是，正如Matt McDonald指出的那样，由于使用这种技术，您可能会看到两个图像。这是由于 IE 筛选器除了添加背景图像（而不是替换）标准背景图像之外，还添加了背景图像。要解决此问题，请使用您喜欢的方法通过 css 定位 IE（这是一种方法，我个人最喜欢的方法），并删除 IE8 及更低版本的标准background-image。

使用 Paul Irish 博客文章中的第一种技术来执行此操作，您可以使用以下内容：

.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;
}