IE 8:背景大小的修复

我试图添加背景大小的IE浏览器,但它不工作:

HTML

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

CSS:

 div#content h2#news { background: url('..http://img.dovov.comnews-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有什么问题?

由“丹”在类似的线程发布,有一个可能的修复,如果你不使用精灵:

如何在IE中进行背景大小的工作?

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

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

警告
该filter有一个缺陷,分配区域内的任何链接不再可点击。

我创build了jquery.backgroundSize.js :一个1.5K的jquery插件,可以用作IE8的“覆盖”和“包含”值的后备。 看看演示 。

解决你的问题可以像这样简单:

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

另外我find了另一个有用的链接。 这是一个使用这样的背景黑客

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

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

我使用上面的filter解决scheme,为ie8。 不过..为了解决冻结环节的问题,还要做到以下几点:

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

这已经解决了我的冻结环节问题。

正如@RSK所指出的,IE8不支持后台大小。 为了找出解决这个问题的方法,我使用了一些IE特定的黑客手段,如下所示:

 //IE8.0 Hack! @media \0screen { .brand { background-image: url(".http://img.dovov.comlogo1.png"); margin-top: 8px; } .navbar .brand { margin-left: -2px; padding-bottom: 2px; } } //IE7.0 Hack! *+html .brand { background-image: url(".http://img.dovov.comlogo1.png"); margin-top: 8px; } *+html .navbar .brand { margin-left: -2px; padding-bottom: 2px; } 

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