Question

我尝试向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出了什么问题？

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

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

<强>注意
过滤器有一个缺陷，分配区域内的任何链接都不再可以点击。

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

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

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

使用此功能，我可以将徽标图像更改为难看的图片。但最终结果还不错。我建议你尝试这样的事情。

IE 8：后台大小修复

5 个答案: