IEはまだ俺たちを苦しめるのか
またかいな。時代が進んでもIE対応は必要という事だな。
状況
SVGアイコンを作成、要素の背景として下記プロパティを設定した。
background-size: 13px;
background-position: left center;
他のブラウザでは期待通りの表示となったが、IE11は以下のようになった。
・アイコンが超ちっちゃい（1px?）
・要素の中央に表示される
原因
Illustratorから吐き出したSVGをそのまま使ってしまうと起こるらしい。
対処方法
・SVGタグにwidth,heightを追記
・SVGタグに「preserveAspectRatio=”xMinYMid”」を追記
参考URL
詳しくは下記を見てくださいな。
http://personal.loudandproud.me/ie11-background-image-svg/
http://ssvvgg.net/post/140503977275/ie9-11%E3%81%A7%E8%83%8C%E6%99%AF%E7%94%BB%E5%83%8F%E3%81%AEsvg%E3%81%AE%E8%A1%A8%E7%A4%BA%E3%81%8C%E5%B4%A9%E3%82%8C%E3%82%8B%E5%95%8F%E9%A1%8C%E3%81%A8%E5%AF%BE%E5%87%A6%E6%B3%95