[CSS/HTML]IE11でmainタグの背景画像(SVG)が表示されない＆切れてしまう[IEバグ]
コーディングしててたまにはIEでも見てみたら、
サイト全体の背景画像が表示されてなくて衝撃が走ったのでまとめとく。
参考サイト
IE11におけるmain要素の扱い - Qiita
IE11で背景に指定したSVGが正しく表示されない件 - Qiita
IEだと背景が表示されない
もちろんChrome、Firefox、Safariでは表示が確認できた。
だがIEだけ真っ白な状態、、
もとの HTMLとCSSはこちら。
<main class="l-main">
<!--------- 省略 --------->
</main>
.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
これでブロック要素として扱ってくれるらしい。
.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 width="300px" height="300px" preserveAspectRatio="xMinYMid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
<!--------- 省略 --------->
</svg>
他のブラウザと同じように表示された！！！
やったー！
まとめ
IEで背景画像出てなくて焦ったけど、対策はあって簡単だったから良かった。
SVGについてはもう少し勉強しようと思った。
Author And Source
この問題について([CSS/HTML]IE11でmainタグの背景画像(SVG)が表示されない＆切れてしまう[IEバグ]), 我々は、より多くの情報をここで見つけました https://qiita.com/super-mana-chan/items/8605bac16ebc174295b6著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .