web-dev-qa-db-ja.com

IE 8：背景サイズの修正

背景のサイズをIEに追加しようとしましたが、まったく機能しません。

HTML

<h2 id="news">Notícias <img src="white-marker.png" alt="" /></h2>

CSS：

div#content h2#news {
    background: url('../images/news-background.jpg') no-repeat;
    background-size: 100%;
    border-radius: 20px;
    color: #fff;
    margin: 20px 0 0 20px;
    padding: 8px 20px;
    width: 90%;
    -moz-background-size: 100%;
    -moz-border-radius: 20px;
    -webkit-background-size: 100%;
    -webkit-border-radius: 20px;
}

filter の何が問題になっていますか？

cssxhtmlfilterwidthbackground-image
138
Thomas

'Dan'によって同様のスレッドで投稿されているように、Spriteを使っていないのなら修正することが可能です。

IEで背景サイズを機能させるにはどうすればいいですか？

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

ただし、これは割り当てられた領域に収まるように画像全体を拡大縮小します。あなたがスプライトを使用しているのであれば、これは問題を引き起こす可能性があります。

注意
フィルタに欠陥があり、割り当てられた領域内のリンクはクリックできなくなりました。

147
Sotkra

jquery.backgroundSize.js を作成しました。1.5Kのjqueryプラグインで、「cover」および「contains」の値に対するIE 8フォールバックとして使用できます。 demo を見てください。

あなたの問題を解決することは同じくらい簡単かもしれません：

$("h2#news").css({backgroundSize: "cover"});
89
Louis-Rémi

また、私は別の便利なリンクを見つけました。これは、このような背景のハックです。

.selector { background-size: cover; -ms-behavior: url(/backgroundsize.min.htc); }

https://github.com/louisremi/background-size-polyfill

20
Muhammad Ahsan

私はie8のために、上記のフィルターソリューションを使用します。ただし、フリーズリンクの問題を解決するには、次の手順を実行します。

background: no-repeat center center fixed\0/; /* IE8 HACK */

これは私にとってフリーズリンクの問題を解決しました。

12
user890332

@RSKが指摘するように、IE8は背景サイズをサポートしていません。これに対処する方法を理解するために、ここに示すようにIE固有のハックをいくつか使用しました。

//IE8.0 Hack!
@media \0screen {
    .brand {
        background-image: url("./images/logo1.png");
        margin-top: 8px;
    }

    .navbar .brand {
        margin-left: -2px;
        padding-bottom: 2px;
    }
}

//IE7.0 Hack!
*+html .brand {
    background-image: url("./images/logo1.png");
    margin-top: 8px;
}

*+html .navbar .brand {
    margin-left: -2px;
    padding-bottom: 2px;
}

これを使用して、私は自分のロゴ画像を見栄えの悪い写真に変更することができました。しかし、最終結果は大丈夫です。このようなことを試してみることをお勧めします。

4
Custodio