はじめに
WEBページ制作においてどのブラウザでも表示できることはとても大切だと思います。
今回Chromeでうまく表示できていたものがIEではうまくできなかったことと、解消方法を備忘録として記載します。事例が追加されれば追記したいと思います。
① 画像が表示できない
Chromeでは問題なく表示できていた画像がIEだと出てこない。。。。orz
解決方法
調べるとカラーモードが 「CMYK」 になっているとIEでは表示されないとのこと。
画像軽量化ツールを利用し画像を軽量化することで解決できました！
■参考サイト
JPGなどの画像が表示されない原因、チェックしたいこと まとめ
② flex-directionを指定すると余計な余白が発生する
Chromeでは出なかった不自然な余白がIEで発生し、確認したところflex-directionを指定している箇所でした。
どうやら flex-direction に column や column-reverse を指定した子要素に画像があると、その子要素に画像の元サイズの高さ分のスペースができてしうとのことです。この元サイズの高さ分のスペースを消す必要があります。
解決方法
min-height: 0%; を指定することで解決できました！
■参考サイト
flex-directionを指定した時に IE11で表示がおかしくなる
まとめ
まだまだ初心者なのでブラウザごとに表示状況が変わっていることにかなりストレスを感じていましたが、きちんと調べて対処していけば解消できる（と思う）ので、これからもトライしていきます。
また、これからまだまだたくさんでてくることだと思うので随時更新していきます！