LoginSignup
14

More than 3 years have passed since last update.

[CSS/HTML]IE11でmainタグの背景画像(SVG)が表示されない&切れてしまう[IEバグ]

Posted at

コーディングしててたまにはIEでも見てみたら、
サイト全体の背景画像が表示されてなくて衝撃が走ったのでまとめとく。

参考サイト

IE11におけるmain要素の扱い - Qiita
IE11で背景に指定したSVGが正しく表示されない件 - Qiita

IEだと背景が表示されない

もちろんChrome、Firefox、Safariでは表示が確認できた。
だがIEだけ真っ白な状態、、

もとの HTMLとCSSはこちら。

HTML
<main class="l-main">
  <!--------- 省略 --------->
</main>
SCSS
.l-main{
  background-color: rgba($gray,0.25);
  background-image:
    url("../img/main-bg-tubu-shiro.svg"),
    url("../img/main-bg-tubu-dot.svg"),
    url("../img/main-bg-tubu-sankaku.svg");
  background-size: 300px;
  // ※背景画像の部分だけ抜粋
}

IEではmainタグが未サポートであることが原因

未サポートとかあるのか。

対策としてはとても簡単だった。

main要素に「display: block」を付与する。
IE11におけるmain要素の扱い - Qiita

これでブロック要素として扱ってくれるらしい。

SCSS
.l-main{
  display: block; // ←ここを追加!!
  background-color: rgba($gray,0.25);
  background-image:
    url("../img/main-bg-tubu-shiro.svg"),
    url("../img/main-bg-tubu-dot.svg"),
    url("../img/main-bg-tubu-sankaku.svg");
  background-size: 300px;
  // ※背景画像の部分だけ抜粋
}

これで表示されて解決、、、と思ったら、
表示はされるけど、画面全体に出したいのに途切れて表示されてしまってた、、、

IEだとSVGの背景画像が切れる

表示はされてるが、空白~画像~空白~、、、のような感じ切れまくっていた。
調べてるとSVGであることが原因だとわかった。

Illustratorで書き出したSVGをそのまま使ったのが原因

対策はこれも簡単。

・SVGタグにwidth,heightを追記
・SVGタグに「preserveAspectRatio=”xMinYMid”」を追記
IE11で背景に指定したSVGが正しく表示されない件 - Qiita

SVG
<svg width="300px" height="300px" preserveAspectRatio="xMinYMid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <!--------- 省略 --------->
</svg>

他のブラウザと同じように表示された!!!
やったー!

まとめ

IEで背景画像出てなくて焦ったけど、対策はあって簡単だったから良かった。
SVGについてはもう少し勉強しようと思った。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14