4

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

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

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

4

5 回答 5

1

可能值得注意的是，polyfill 并非设计用于特定像素大小，即 background-size: 32px 64px

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

背景：无\9；

于 2013-11-18T01:52:11.493 回答
0

我在 IE8 上遇到了同样的问题。当我在根文件夹中复制“.htaccess”时。它完美地工作。

于 2014-08-08T11:32:48.733 回答
0

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-12T13:52:45.303 回答
0

试试这个 css 代码，ie8 工作 dropshadow

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-24T05:59:20.143 回答
0

实际上，不推荐使用的版本不是必需的。

对我来说，当我使用行为而不是 -ms-behavior 时它起作用了

于 2014-10-02T12:51:23.800 回答