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

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

适用于背景尺寸：封面

Answer 2

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

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

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

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

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

Answer 3

您使用此样式代码

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