14

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

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

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

非常感谢您的帮助:-)

4

1 回答 1

39

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 及以下用户的背景应用替代方案。

同样值得注意的是，正如马特麦克唐纳所指出的，由于使用这种技术，您可能会看到两张图像。这是由于 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;
}
于 2012-09-27T21:31:21.477 回答