拉伸圖像背景寬度不會在IE8

工作，我想伸展的a標籤的背景，但它不會在Internet Explorer 8的工作這是我使用的代碼：拉伸圖像背景寬度不會在IE8

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

來源

2012-10-17 oded

使用CSS拉伸圖像大部分時間是一個非常糟糕的主意。不僅結果大部分時間很髒，但網絡成本可能高於所需尺寸的靜態圖像 –

'a'是一個內聯標籤，您是否嘗試過'display：block'？ – Andy

顯示：塊沒有幫助 – oded

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

與背景大小的工作原理：覆蓋

來源

2012-10-17 10:09:29

您可以使用此代碼風格

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

來源

2012-10-17 10:12:38

是基於JavaScript的使用jQuery另一個跨瀏覽器的解決方案是有例如：

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

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

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

根據y我們的需求，比如我的情況，這可能是更好的解決方案。

來源

2013-04-20 11:12:51 Gavin

拉伸圖像背景寬度不會在IE8

回答

相關問題