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

时间:2012-09-27 21:22:59

标签: css internet-explorer-8 background retina-display

我使用以下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修复此问题吗?

非常感谢您的帮助: - )

1 个答案:

答案 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;
}