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

问题描述

我使用的Retina图像下面的CSS和它完美的作品在FF​​，铬，野生动物园但不可以在IE中。

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

是否有IE修复了使用的背景大小 - 如果是这样，我怎么能使用我目前的code实现它

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及以下只需不支持背景大小 所以你要么将不得不使用的由于IE5.5已支持AlphaImageLoader的过滤器：

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

或使用<一个某种方法href=\"https://github.com/h5bp/html5-boilerplate/blob/ce7c3c5c1595ddc42ca3b961179a0cf85aa714be/index.html#L2\">targeting通过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.

这也是值得一提的，<一个href=\"http://stackoverflow.com/questions/12630221/ie8-fix-for-background-size-property-retina-image/12630314?#comment-23024739\">as马特·麦克唐纳指出时，您可能会看到两个图像，使用这种技术的结果。这是通过将IE滤波器除了添加背景图象而引起的，而不是取代，标准背景图像。要解决此问题，使用preferred方法通过CSS针对IE浏览器（这里的一个方法，我个人最喜欢），取下标准背景图片为IE8及以下。

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.

使用保罗爱尔兰的博客文章以第一种技术这样做，可以使用以下内容：

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修复背景-size属性？视网膜图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！