IE8: 后台大小修复

我试过给 IE 添加背景大小，但是根本不起作用:

超文本标示语言

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

过滤器怎么了？

304379 次浏览
小开

正如“ Dan”在一个类似的帖子中提到的，如果你不使用精灵，有一个可能的解决方案:

如何在 IE 中使用背景大小？

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


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

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

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

小开

正如@RSK IE8所指出的，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;
}

使用这个我能够改变我的标志图像到一个丑陋的居住图片。但最终的结果是好的。我建议你试试这个。

小开

我创建了 背景大小: 一个1.5 K 的 jquery 插件，它可以用作 IE8的“ cover”和“ include”值的备份。看看 小样。

解决你的问题可以很简单:

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

我使用上面的过滤器解决方案，为 ie8。 但是。 为了解决冻结环节的问题，还要做到以下几点:

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

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

小开

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

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

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


提交答案