CSS背景大小的IE8，背景大小，填充工具不工作

我試圖使用IE8的背景大小屬性與此有前途的解決方案：https://github.com/louisremi/background-size-polyfill CSS背景大小的IE8，背景大小，填充工具不工作

但我收到此錯誤：SCRIPT65535：意外呼叫到方法或財產訪問。

在IE8中設置背景圖像的圖像大小的任何想法或替代方案？

2013-06-24 Marcus Franzen

你可以發佈你的HTML和JS嗎？由於這個錯誤聽起來像是你有一個語法錯誤 – stackErr

試試這個CSS代碼，IE8工作陰影效果

body { 
    margin: 0; 
    background: url(images/algeria.jpg) center no-repeat; 
    -ms-behavior: url(backgroundsize.min.htc); 
} 
.bgsCover { 
    background-size: cover; 
} 
.bgsContain { 
    background-size: contain; 
} 
/* this allows to use a second background in all browsers and IE8 */ 
body:after { 
    content: ""; 
    background: url(images/pattern.png) repeat; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 
/* responsive carousel FTW */ 
#carousel { 
    height: 45%; 
    width: 50%; 
    margin: 0 auto; 
    background: #0F0808; 
    border-radius: 3px; 
} 
#carousel ul { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    list-style: none; 
} 
#carousel li { 
    display: none; 
    height: 100%; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: contain; 
    -ms-behavior: url(backgroundsize.min.htc); 
} 
#carousel .active { 
    display: block; 
} 
/* less interesting stuff below */ 
html, body { 
    height: 100%; 
    font-family: "Arial", "Liberation Sans", sans-serif; 
    color: #FEE; 
} 
h1 { 
    font-family: 'Great Vibes', sans-serif; 
    text-align: center; 
    margin: 0 0 40px; 
    text-shadow: 0 0 2px #222; 
    font-size: 1.7em; 
    font-weight: normal; 
    position: relative; 
    top: 20px; 
filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, direction=90); 
} 
h1 i { 
    font-size: 1.3em; 
    display: block; 
    -moz-transform: rotate(-15deg); 
    -webkit-transform: rotate(-15deg); 
    -o-transform: rotate(-15deg); 
    -ms-transform: rotate(-15deg); 
    transform: rotate(-15deg); 
filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, direction=90); 
} 
p { 
    text-align: center; 
    font-size: 1.5em; 
    text-shadow: 0 0 2px #222; 
/* For IE 8 */ 
filter: progid:DXImageTransform.Microsoft.Shadow(color=#222222, direction=90); 
    /* For IE 5.5 - 7 */ 
    zoom: 1; 
    color: #CCC 
} 
.button { 
    color: #0F0808; 
    text-decoration: none; 
    background: #FEE; 
    border-radius: 3px; 
    text-shadow: none; 
    padding: 4px 8px; 
}

HTML源代碼

<body class="bgsCover"> 
<h1><i>background-size</i> polyfill</h1> 
<a href="https://github.com/louisremi/background-size-polyfill"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a> 
<div id="carousel"> 
    <ul> 
    <li id="img1" class="active" style="background-image: url(images/algerian1.jpg);"> 
    <li id="img2" style="background-image: url(images/jar1.jpg);"> 
    <li id="img3" style="background-image: url(images/algerian2.jpg);"> 
    <li id="img4" style="background-image: url(images/jar2.jpg);"> 
    </ul> 
</div> 
<p>Stretch background image using CSS3 <code>background-size: cover;</code> and <code>background-size: contain;</code>, in IE8 too.<br/> 
    Reacts to resize events for responsive backgrounds and galeries!</p> 
<p><a class="button" href="https://github.com/louisremi/background-size-polyfill#readme">Instructions</a> - <a class="button" href="https://github.com/louisremi/background-size-polyfill/downloads">Downloads</a></p> 
<script> 

/*var images = [ 
'algeria.jpg', 
'parthenon.jpg', 
'propylaea.jpg' 
], 
curImg = 0; 
document.getElementById("switchImage").onclick = function() { 
curImg = (curImg + 1) % images.length; 
document.body.style.backgroundImage = "url(images/" + images[ curImg ] + ")"; 
}; 

var sizes = [ 
"Cover", 
"Contain", 
"Auto" 
], 
curSize = 0; 
document.getElementById("switchSize").onclick = function() { 
curSize = (curSize + 1) % sizes.length; 
document.body.className = "bgs" + sizes[ curSize ]; 
};*/ 

var items = document.querySelectorAll("#carousel li"), 
curItem = 0; 
setInterval(function() { 
items[ curItem ].className = ""; 

curItem = (curItem + 1) % items.length; 
items[ curItem ].className = "active"; 
}, 3000); 

</script> 
</body>

來源

2013-06-24 05:59:20 falguni

這可能是值得一提的是，填充工具的目的不是與特定的像素大小，即工作我知道這不會回答你的問題，但對於IE 8，我剛剛刪除了這個CSS黑客不重要的背景（而不是o f試圖弄清楚如何確定它們的尺寸）

background：none \ 9;

來源

2013-11-18 01:52:11

我在IE8上遇到了同樣的問題。當我在根文件夾中複製「.htaccess」時。它完美的作品。

來源

2014-08-08 11:32:48 Malaw

Polyfill也沒有爲我工作。我的解決方案是使用原來的「棄用」版本。

<!--[if lt IE 9]>   
    <script 
src="//louisremi.github.io/jquery.backgroundSize.js/jquery.backgroundSize.js"> 
    </script> 

     <script> 
      $('.logo').css("background-size", "cover"); 
     </script> 

<![endif]-->

來源

2014-08-12 13:52:45

實際上，不推薦使用的版本不是必需的。

對我而言，當我用行爲代替-ms-behavior

來源

2014-10-02 12:51:23 Fabio

CSS背景大小的IE8，背景大小，填充工具不工作

回答

相關問題