単一の SVG 背景画像のみを使用して左右のナビゲーション ボタンを作成し、それを水平方向に反転して反対方向にします。これは、Internet Explorer 9 を除く、 CSS 2D 変換をサポートするすべてのブラウザーで正常に機能します。基本的に、CSS は次のようになります。
div.nav-left, div.nav-right {
background-image: url('TriangleArrow-Right.svg');
}
div.nav-left {
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
Internet Explorer 10、Firefox、Chrome、Safari などで正しく表示されるjsFiddleを作成しました。
しかし、実際には IE9 では次のようになります。
ボタンが指す方向を示すために、大なり記号を含めました。そして実際には、IE9 が変換をテキストに正しく適用していることがわかりますが、SVG 背景画像に対してはまったく逆のことを行っています。
SVG 背景画像を PNG に変更すると、すべてが IE9 で正しく動作しますが、このjsFiddleを参照してください。
これに関する情報は見つかりませんでした。IE9 は CSS 変換とSVG を CSS 背景として正しくサポートする必要があるため、これはバグのようです。