1

CSS3 の background-size を IE8 で正しく動作させる必要があります。そこには多くのJavaScriptライブラリがありますが、それらはpx値ではなくオプション「カバー」と「含む」を拡張しています。画像スプライトを使用しているため、背景サイズをピクセル単位で設定する必要があります。

これが私のコードのデモです。スプライト画像は 600px 400px ですが、背景サイズを 300px x 200px に設定して、高密度ディスプレイで鮮明に見えるようにしました。

<a class="one">Link one</a>
<a class="two">Link two</a>

a {
    overflow: hidden;
    text-indent: -9999px;
    display: block;
    width: 58px;
    height: 58px;
    background: url("https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png");
    background-size: 300px 200px; 
}    a.one {
    background-position: 0 0;
}
a.two {
    background-position: 0 -56px;
}

http://jsfiddle.net/rr2obdss/4/

2 番目の画像スプライトを作成して維持することなく、サポートを IE8 に拡張できますか?

4

3 に答える 3

1

あまり詳しく説明していない特定のケースによっては、疑似要素を使用した回避策が機能する場合がありますか? 指定されたサイズの疑似要素を追加して、スプライトを背景にするだけですか?

絶対位置/相対位置と z-index の適切な組み合わせにより、これは機能する可能性があります。

あなたが達成しようとしていることについてより多くの情報を提供していただければ、私はより良い支援を提供することができます.

編集：

さて、私は今解決策を得ました。予想通りの種類：かなり汚れているように見えます。しかし、それはIE8で派手なことをしたいときに得られるものです:-P

a {
    overflow: hidden;
    text-indent: -9999px;
    display: block;
    width: 58px;
    height: 58px;
    position: relative;
}
a:before {
    content: "";
    background: url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png);
    zoom: .5;
    text-indent: 0;
    overflow: hidden;
    width: 600px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
}
a.one:before {
    background-position: 0 0;
}
a.two:before {
    background-position: 0 -112px;
}

これの欠点は、必要な寸法を書き留めるだけでなく、ズーム率を計算する必要があることです。また、background-position はフルサイズの背景に対して相対的になります。

上記のコードで私がしていることに不明な点はありますか?

于 2014-11-21T22:25:57.643 に答える
-1

caniuse.comによると、このポリフィルが役立つ場合があります。

お役に立てれば...

-- ランス

于 2014-11-10T23:00:54.510 に答える