忌々しいIEのcssのバグの修正箇所を効率的に見つける方法

「web サイトがやっと完成した！これで納品できる！

と思ったらIEでだけレイアウトがめちゃくちゃになっている、、、

直し方も分からないしどうしよう、、、」

web制作にかかわった人であれば、IEで発生するバグの修正に頭を悩ませた経験は１度や２度ではないと思います。

余計な手間が増えるので本当に勘弁してほしいところですが、一体どうすればバグの修正方法がわかるのでしょうか？

IEで発生したcssのバグを効率よく発見する方法

結論から言いますと、IEでのバグを発見する方法は、IEの開発者ツールを開き直接cssを書きながら色々いじってみる！

ということです。順番に解説してみます。

１、IEで問題のあるページを開く

まずは問題のあるページをIEで開きます。

２、右クリックして開発者ツールを開く

開発者ツールを右クリックで開きましょう。

３、怪しそうなところを修正追記してみる。

開発者ツールを開いたら、左側のhtmlタグから怪しそうなところを選択し、右側のcssの欄に追記、削除をしてレイアウトがどうなるか試してみましょう。

４、怪しいところを見つけたら、cssファイルを修正して完了

今回の場合は、怪しい個所に片っ端からwidth:100%;を追記したところ、修正箇所がみつかり何とかなりました。

修正箇所が見つかれば、あとはご自身のファイルを追記、修正してデバッグ完了です。

IEのバグ修正は泥臭く、悪さをしている個所を探すしかないっぽい

というわけで、IEの修正方法を効率よく探す方法をまとめてみました。

もしかすると

「いやいや、全然効率よくないじゃないか！もっと楽な方法はないのかよ？」

と思うかもしれません。

が、、、ぶっちゃけありません汗。

ブラウザそのものが古臭い仕様だからこそ起こるバグだからです。

確かに、ネットでIEのバグの修正方法をググると『このコードを追記すれば修正できる』という情報が出てはきます。

そういった情報は参考にはなるのですが、残念ながらその通りコードを改変してもバグが解消されないことも多いのです。

ですので、自身で怪しいところにwidth、max-width、min-width、height、min-height、max-height、など思いつく内容を追記しながら試行錯誤するしか方法がないんです。

フレックスボックスやフォームなど特にバグりやすい傾向はあるので、ある程度修正箇所は絞れますが、明確な対応方法はその都度試行錯誤するしかありません汗

非常にめんどくさいですし、我々エンジニアからするとIEには憎しみすら感じてしまいますが、、、

２０２０年現在でも日本人の10%程度はIEユーザーですので、IEを無視することもできません。

手間でしかありませんが、IEユーザーが絶滅するまでなんとか乗り切りましょう。