3

私はSVG自分のサイトにあるいくつかの画像を、適切PNGにサポートされていないブラウザに変換することを検討しています。SVG私は主にテキストベースのものが表示されるIE（完全に間違ったフォントが表示される）という問題を抱えているので、へのフォールバックを作成すると思いましたPNG。

私はこれについての素晴らしいウォークスルーを探してみましたが（私は自白の初心者です）、まだすべてを機能させることができていません。modernizer.jsを使用して互換性を確認してから、互換性のない別の画像で提供したいと思います（？）

4

1 に答える 1

6

Chris Coyierは、最新のSmashing Magazine CSS Q＆Aでこの正確な質問に答えています。

  1. SVGをテストするだけに切り詰められたModernizrのバージョンをダウンロードします（それが必要な唯一のテストであると仮定します）。
  2. テストを実行します。合格したら、SVGに入れます。失敗した場合は、ビットマップを挿入します。基本的に：

例（JSソリューション）：

if (!Modernizr.svg) {
    $("#logo").css("background-image", "url(fallback.png)");
}

例（CSSソリューション）：

.no-svg #logo { background-image: url(fallback.png); }

これは、IE8以下でのみ必要です。ブラウザサポートの完全なテーブルを使用できますか。

クリスありがとう！

于 2012-10-24T23:43:16.387 に答える