IE8 修复 background-size 属性?视网膜图像 [英] IE8 fix for background-size property? Retina Image

问题描述

我正在为 Retina 图像使用以下 CSS，它在 FF、Chrome、Safari 中完美运行，但在 IE 中不.

I am using the following CSS for Retina images and it works perfectly in FF, Chrome, Safari but not in IE.

是否有针对 IE 使用 background-size 的修复 - 如果有，我如何使用我当前的代码来实现它?

Is there a fix for IE for using background-size - and if so, how could I implement it using my current code?

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 解决这个问题?

Can someone explain how I fix this for IE?

非常感谢您的帮助:-)

Many thanks for any help :-)

推荐答案

IE8及以下简单don't 支持 background-size 所以你要么必须使用 AlphaImageLoader Filter，从IE5.5开始支持:

IE8 and below simply don't support background-size so you're either going to have to use the AlphaImageLoader Filter which has been supported since IE5.5:

.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 及以下用户应用替代背景.

Or use some method of targeting IE versions via CSS to apply an alternative to your background for IE8 and below users.

同样值得注意的是，asMatt McDonald 指出，由于使用了这种技术，您可能会看到两张图像.这是由于 IE 过滤器在标准背景图像之外添加了背景图像，而不是替换标准背景图像.要解决此问题，请使用您的首选方法通过 css 定位 IE (这是一种方法，我个人最喜欢的) 并删除 IE8 及以下版本的标准 background-image.

It's also worth noting, as Matt McDonald points out, that you may see two images as a result of using this technique. This is caused by the IE filter adding a background image in addition to, instead of replacing, the standard background image. To resolve this, target IE via css using your preferred method (here's a method, my personal favourite) and remove the standard background-image for IE8 and below.

使用 Paul Irish 博客中的第一种技术发布 要做到这一点，您可以使用以下内容:

Using the first technique from Paul Irish's blog post to do this, you could use the following:

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

这篇关于IE8 修复 background-size 属性?视网膜图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！