web-dev-qa-db-ja.com

IE8はbackground-sizeプロパティを修正しますか？網膜画像

私はRetina画像に次のCSSを使用していますが、FF、Chrome、Safariでは完全に動作しますが、IEではnotです。

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

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でこれを修正する方法を誰かが説明できますか？

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

cssinternet-explorer-8backgroundretina-display
14
michaelmcgurk

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

.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')";
}

または targeting IE CSSを介したバージョン の何らかの方法を使用して、IE8以下のユーザーの背景に代替を適用します。

Matt McDonaldが指摘しているように 、このテクニックを使用した結果、2つの画像が表示されることもあります。これは、IEフィルターが、標準の背景画像を置き換える代わりに、背景画像を追加することにより発生します。これを解決するには、cssを介してtarget IE=好みの方法（ ここは私の個人的なお気に入り ）を使用して、IE8以下の標準background-imageを削除します。

Paul Irish's blog post の最初のテクニックを使用してこれを行うには、次を使用できます。

.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;
}
39
Josh Davenport