Question

我正在尝试使用IE8中的background-size属性和这个有前途的解决方案：https://github.com/louisremi/background-size-polyfill

但是我收到此错误：SCRIPT65535：意外调用方法或属性访问。

在IE8中设置背景图像的图像大小的任何想法或替代方法？

Answer 1

值得注意的是，polyfill不适用于特定的像素大小，即背景大小：32px 64px

我知道这不能回答你的问题，但对于IE 8，我刚刚用这个CSS黑客删除了不重要的背景（而不是试图找出如何调整它们的大小）

background：none \ 9;

Answer 2

试试这个css代码，即8个工作的drophadow

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>

Answer 3

我在IE8上遇到了同样的问题。当我在根文件夹中复制“.htaccess”时。它运作得很好。

Answer 4

Polyfill也不适合我。我的解决方案是使用原来的＃34;弃用＆＃34;版本

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

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

<![endif]-->

Answer 5

实际上已弃用的版本不是必需的。

对我而言，当我使用行为代替-ms-behavior

时，它起作用了

IE8中的CSS背景大小，background-size-polyfill无法正常工作

5 个答案: