## 前置き
HTML/CSSの不具合で、
「IEだけアイコンが見切れてるけど？」とか
「IEだけアイコンの位置がズレてるけど？」
みたいな不具合をよく見かけます。
その際の解決策を少し紹介できればなーと。
（間違っていたらごめんやで！こっそり教えてください！）
IEあるある その1 「IEだけアイコンが見切れてるけど？」
SVGファイルに、
viewBox="n n n n"
の記述があるか確認しましょう。
無い場合、アイコンが見切れてしまいます。
ちなみにviewBoxってなんやねん！
って思う人いるかもしれないです。
説明すると
https://www.indetail.co.jp/blog/13002/
という訳です。
解決策
SVGにはviewBoxをちゃんと書きましょう！
IEあるある その2 「IEだけアイコンの位置がズレてるけど？」
これは主に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使いづらいブラウザは使わないのが
一番いいんですけどねー。
あと数年は我慢です。