IE 8:后台大小修复

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

过滤器有什么问题？

Answer 1

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

但是,这会缩放整个图像以适合分配的区域.因此,如果您使用精灵,这可能会导致问题.

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

Answer 2

我创建了jquery.backgroundSize.js:一个1.5K jquery插件,可以用作"封面"和"包含"值的IE8后备.看看演示.

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

$("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 */

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