CSS IE8 修复了背景大小属性？视网膜图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12630221/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IE8 fix for background-size property? Retina Image
提问by michaelmcgurk
I am using the following CSS for Retina images and it works perfectly in FF, Chrome, Safari but notin IE.
我正在为 Retina 图像使用以下 CSS，它在 FF、Chrome、Safari 中完美运行，但在 IE 中却没有。
Is there a fix for IE for using background-size - and if so, how could I implement it using my current code?
IE 是否有使用背景大小的修复程序 - 如果是，我如何使用我当前的代码实现它？
CSS:
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
HTML
<div class="arrow-big-right"></div>
Can someone explain how I fix this for IE?
有人可以解释我如何为 IE 解决这个问题吗？
Many thanks for any help :-)
非常感谢您的帮助:-)
回答by Josh Davenport
IE8 and below simply don't support background-sizeso you're either going to have to use the AlphaImageLoader Filterwhich has been supported since IE5.5:
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')";
}
Or use some method of targeting IE versions via CSSto apply an alternative to your background for IE8 and below users.
或者使用某种通过 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-imagefor IE8 and below.
还值得注意的是，正如 Matt McDonald 指出的那样，您可能会因为使用这种技术而看到两个图像。这是由于 IE 过滤器在标准背景图像之外添加背景图像而不是替换标准背景图像造成的。要解决此问题，请使用您的首选方法（这是一种方法，我个人最喜欢的方法）通过 css 定位 IE ，并删除background-imageIE8 及更低版本的标准。
Using the first technique from Paul Irish's blog postto do this, you could use the following:
使用 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;
}
