4

この有望なソリューションで IE8 の background-size プロパティを使用しようとしています: https://github.com/louisremi/background-size-polyfill

しかし、次のエラーが表示されます: SCRIPT65535: メソッドまたはプロパティ アクセスへの予期しない呼び出し。

IE8 で背景画像の画像サイズを設定するためのアイデアや代替案はありますか?

4

5 に答える 5

1

ポリフィルは特定のピクセル サイズ、つまり background-size: 32px 64px で動作するように設計されていないことに注意してください。

これがあなたの質問に答えていないことはわかっていますが、IE 8 では、この CSS ハックを使用して重要でない背景を削除してきました (背景のサイズを決める方法を見つけようとするのではなく)。

背景: なし\9;

于 2013-11-18T01:52:11.493 に答える
0

この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-24T05:59:20.143 に答える
0

IE8でも同じ問題が発生しました。ルートフォルダーに「.htaccess」をコピーしたとき。それは完全に機能します。

于 2014-08-08T11:32:48.733 に答える