Question

我想扩展a标记的背景，但它在Internet Explorer 8中不起作用。这是我正在使用的代码：

div.tabbernav div.tabberactive a{
    color:#fff;
    padding:11px;
    background: url(../images/bag_selected.png) ;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-repeat: no-repeat;
    height:43px;
}

Answer 1

background-size是CSS3属性，通常在IE8中不起作用。你也错过了-webkit- -o-和-ms-前缀。

也就是说，使用MS过滤器可以解决这个问题。看看http://www.alistapart.com/articles/supersize-that-background-please/

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

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

适用于background-size：cover

Answer 2

您使用此样式代码

div.tabbernav div.tabberactive a{
    color:#fff;
    padding:11px;
    background: url(../images/bag_selected.png) ;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    background-repeat: no-repeat;
    height:43px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/logo.gif',
    sizingMethod='scale');

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

Answer 3

另一种基于JavaScript的jQuery跨浏览器解决方案是：

<div id="mystretchedimage"><img src="image.jpg" /></div>

#mystretchedimage { width: 100%; height: 600px; overflow: hidden; }

jQuery('#mystretchedimage img').css({ width: $(window).width() });

根据您的需要，例如我的情况，这对您来说可能是更好的解决方案。

拉伸图像背景宽度在IE8中不起作用

3 个答案: