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

Question

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

有人可以解释我如何解决这个问题吗？

非常感谢任何帮助:-)

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 并删除background-imageIE8及以下标准.

使用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;
}