IE 8：背景大小修复答案

【问题标题】：IE 8: background-size fix [duplicate]IE 8：背景大小修复
【发布时间】：2011-06-20 14:04:07
【问题描述】：

我尝试将背景大小添加到 IE，但它根本不起作用：

HTML

<h2 id="news">Notícias <img src="white-marker.png" alt="" /></h2>

CSS：

div#content h2#news {
    background: url('../images/news-background.jpg') no-repeat;
    background-size: 100%;
    border-radius: 20px;
    color: #fff;
    margin: 20px 0 0 20px;
    padding: 8px 20px;
    width: 90%;
    -moz-background-size: 100%;
    -moz-border-radius: 20px;
    -webkit-background-size: 100%;
    -webkit-border-radius: 20px;
}

filter 有什么问题？

【问题讨论】：

确保兼容参考stackoverflow.com/questions/2991623/…
如果您不使用border-radius，您的建议有效...
正如@RSK 所指出的，background-size 在 IE8 中不起作用。
好的，但正如您在标题中看到的那样，我需要一个 IE 8 修复...谢谢大家。
考虑到只有大多数浏览器的最新版本（在某些情况下只是当前的 beta 版本）支持background-size，您需要的不仅仅是 IE8 的“修复”。重新设计你的设计可能更明智，这样它就不需要这个了。或者使用绝对定位将图像（不是背景图像）放置在页面其余部分的下方。

标签： css xhtml filter width background-image

【解决方案1】：

正如“Dan”在类似帖子中所发布的那样，如果您不使用精灵，可能会有一个解决方法：

How do I make background-size work in IE?

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

但是，这会缩放整个图像以适应分配的区域。所以如果您使用精灵，这可能会导致问题。

注意
过滤器有缺陷，分配区域内的任何链接都无法再点击。

【讨论】：

过滤器有一个重大缺陷，它冻结了分配区域内的所有链接。
另请注意，图片路径必须相对于文档而不是 CSS 文件。
是否可以告诉ie按比例缩放图片..？
据称应该，因为尺寸方法是“缩放”，但它似乎失败了
不，不，不。此过滤器不会保留图像比例，而是将图像拉伸以填充容器！它相当于“背景大小：100% 100%”。在 IE8 中打开它可以看到它jsfiddle.net/2VgjD/1/embedded/result

【解决方案2】：

我创建了jquery.backgroundSize.js：一个 1.5K 的 jquery 插件，可用作“cover”和“contain”值的 IE8 后备。看看demo。

解决您的问题可能很简单：

$("h2#news").css({backgroundSize: "cover"});

【讨论】：

效果很好！非常感谢。您节省了我的时间。
这非常好用！感谢伙伴拯救了我的一天！
谢谢，但是这个插件在应用于 body 时似乎有其自身的问题。
请注意，这个插件显然已经被github.com/louisremi/background-size-polyfill取代了

【解决方案3】：

我还找到了另一个有用的链接。这是一个像这样使用的背景黑客

.selector { background-size: cover; -ms-behavior: url(/backgroundsize.min.htc); }

https://github.com/louisremi/background-size-polyfill

【讨论】：

作者（Louis Rémi）在之前的回答中已经提到了这一点。
但不是在这个问题上，对吧！
开箱即用完美！

【解决方案4】：

我使用上面的过滤器解决方案，用于 ie8。然而.. 为了解决冻结链接问题，请执行以下操作：

background: no-repeat center center fixed\0/; /* IE8 HACK */

这解决了我的冻结链接问题。

【讨论】：

【解决方案5】：

正如@RSK 所指出的，IE8 不支持背景大小。为了找出解决这个问题的方法，我使用了一些特定于 IE 的 hack，如下所示：

//IE8.0 Hack!
@media \0screen {
    .brand {
        background-image: url("./images/logo1.png");
        margin-top: 8px;
    }

    .navbar .brand {
        margin-left: -2px;
        padding-bottom: 2px;
    }
}

//IE7.0 Hack!
*+html .brand {
    background-image: url("./images/logo1.png");
    margin-top: 8px;
}

*+html .navbar .brand {
    margin-left: -2px;
    padding-bottom: 2px;
}

使用它，我能够将我的徽标图像更改为丑陋的驻留图片。但是最后的结果很好。我建议你尝试这样的事情。

【讨论】：