IEと少し仲良くする方法 #HTML

　前置き

HTML/CSSの不具合で、
「IEだけアイコンが見切れてるけど？」とか
「IEだけアイコンの位置がズレてるけど？」
みたいな不具合をよく見かけます。

その際の解決策を少し紹介できればなーと。
（間違っていたらごめんやで！こっそり教えてください！）

SVGファイルに、

viewBox="n n n n"

の記述があるか確認しましょう。
無い場合、アイコンが見切れてしまいます。

ちなみにviewBoxってなんやねん！
って思う人いるかもしれないです。

SVGにはviewBoxをちゃんと書きましょう！

これは主にdisplay:flexを使っている時に起きがちです。
ちなみにアイコンの位置以外にも、display:flexを使って
レイアウトを調整している際によく起きます。

原因はflexアイテムの伸び率、縮み率の設定にあります。
それぞれの説明はMDNとか適当に見てください。
https://developer.mozilla.org/ja/docs/Web/CSS/flex

flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;

こやつらです。
この内のflex-basisを設定しないとバグります。

また、ショートハンド記法でも同様で、

flex: 1 30px;

こんな風に書くとバグります。
（左から順にflex-grow、flex-shrink、flex-basis）

上記の場合、flex-basisが記載されていない為、
IEが勝手にflex-basis:autoと解釈します。

flex-basis:autoなんだから
そりゃレイアウト崩れるよねって感じです。

flex-basisをちゃんと設定しましょう！

大した内容では無いですが、
display:flexを使ってレイアウトが逝ってしまった時、
確認する箇所として参考にして頂けたらと思います。

また、個人的な感想ですが、IEは基本全て定義してあげた方が安全です。
定義しないと、autoと解釈されがちなイメージです。

まあ、IEのようなクs使いづらいブラウザは使わないのが
一番いいんですけどねー。
あと数年は我慢です。