IE9、IE10でsvgのサイズが変になる

imgタグにsvgを指定して表示したとき、IE9とIE10で確認したのですが、縦横比がおかしく表示されてしまうことがありました。
IE9だけならそろそろサポートも切れていることだしいいんじゃない?という選択肢もありそうですが、IE10はまだ切れないなぁ。

どうやら原因は、IEがCSS2.1の仕様に従って高さを150pxに固定して表示してしまう、ということなんだそうです。
へー。

いや、でも困ります。
明確にサイズ指定が出来たりするなら良いんですけど、レスポンシブだといろいろムリが。
そもそもサイズがいろいろ変わってもきれいに表示されて欲しいというのもあってsvgを選択しているという面もありますので。
安全を取るならpngにしちゃうという手もありますけど、svgのがきれいですからね。

JavaScriptで解決する方法とかあるみたいですが、今回は違う方法を見つけました。
それは、position:absoluteにすること。
どうやらposition:absoluteにすることで正しいアスペクト比で表示してくれるようです。
なんでやねん。

もちろんレイアウトの都合上、absoluteに設定できない事も多いでしょうね。
まぁ、そういう方法もあるんだな、くらいな感じで。

コメント

このブログの人気の投稿

FacebookアプリのSMSアップデートの通知をオフにする

【解決!】InDesignのエラー「ファイルが存在しないか、ファイルへのアクセス権がないか、またはファイルが別のアプリケーションで使用されている可能性があります。」

Adobe Photoshop CS6の自動保存機能のファイル保存場所

子どもがマイクラPEで、友だちとオンラインマルチプレイをやりたいと言い出したときの話。

Healbe Gobeが来た! ファースト レビュー。