14

Retina 画像に次の CSS を使用しています。FF、Chrome、Safari では完全に機能しますが、IEでは機能しません。

background-size を使用するための IE の修正はありますか?もしそうなら、現在のコードを使用してどのように実装できますか?

CSS:

.arrow-big-right {
    display: block;
    width: 42px;
    height: 48px;
    margin-bottom: 1.8em;
    background-image: url(arrow-big-right.png);
    background-repeat: no-repeat;
    background-size: 42px 48px;
}

HTML

<div class="arrow-big-right"></div>

誰かがIEでこれを修正する方法を説明できますか?

助けてくれてありがとう:-)

4

1 に答える 1

39

IE8 以下は単にサポートしていないbackground-sizeため、IE5.5以降でサポートされているAlphaImageLoader フィルターを使用する必要があります。

.arrow-big-right {
    display: block;
    width: 42px;
    height: 48px;
    margin-bottom: 1.8em;
    background-image: url(arrow-big-right.png);
    background-repeat: no-repeat;
    background-size: 42px 48px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}

または、CSS を介して IE バージョンをターゲットにする方法を使用して、IE8 以下のユーザーの背景に代替を適用します。

また、Matt McDonald が指摘しているように、この手法を使用すると 2 つの画像が表示される場合があることにも注意してください。これは、IE フィルタが標準の背景画像を置き換えるのではなく、背景画像を追加することによって発生します。これを解決するには、好みの方法 (これは私の個人的なお気に入りの方法です)を使用して css 経由で IE をターゲットにしbackground-image、IE8 以下の標準を削除します。

これを行うには、Paul Irish のブログ投稿の最初の手法を使用すると、次のように使用できます。

.arrow-big-right {
    display: block;
    width: 42px;
    height: 48px;
    margin-bottom: 1.8em;
    background-image: url(arrow-big-right.png);
    background-repeat: no-repeat;
    background-size: 42px 48px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}

.ie6 .arrow-big-right, 
.ie7 .arrow-big-right, 
.ie8 .arrow-big-right {
    background-image: none;
}
于 2012-09-27T21:31:21.477 に答える