こんにちは。yamahanaです。

コーディングをしていて緊張する瞬間ってありますか？
私はまだまだコーディング技術が未熟なので、多々あるのですが、その一つがブラウザでチェックする時です。

特にIE（Internet Explorer）のブラウザチェック！
ドキドキします。

どうか崩れていませんように‼といつも懇願しながらチェックしてます。
それを防ぐためにも、IEでチェックをしつつコーディングすればいいんですが、時間が迫られていたりする時は、ついつい後回しになってしまいます。

まあ、どんな時にバグが起こるかを知っておけば防げるかと思うのですが。。

そこで、今回は最近あったIEバグをメモも兼ねてご紹介します。

トーフバグ！

先日、IEでチェックしたら下のようない四角にバツ印の画像が、サイト全体に映しだされました。

恐怖！

調べてみると通称「豆腐」と呼ばれているそうで、ウェブフォントなどを使用していたり、ヒラギノを優先フォントとして指定すると、改行のbrタグが豆腐で表示されてしまうことがあるそうです。

なので、brに対して下記の指定をする事で解消されました。

font-family: sans-serif !important;

ちなみにGoogle FontsのNoto Fontsは豆腐が出ないようにするように作られたそうで、no more tofuという意味だそうです。

知らなかった！

テーブルがはみ出してしまう！

お次はこちら。
テーブルで組んだ箇所がスマホサイズで見た時に、下記のようになってしまいました。

なぜかテーブル要素が横にはみ出てしまう！

width:100%;にしても効果なし。。

こちらは以下のコードを入れることで解消されました。

table {
width: 100%;
table-layout: fixed;
}

SVG画像が表示されない！

最近流行りの無敵のSVG画像ですが、IEで見るとちっちゃくなって表示されない！

これは幅と高さを指定しないことが原因なようで、下記のように指定してあげることで解消されました。

.svg{
width:500px;
height: 300px;
}

最強と思われたSVG。使うの恐い。。

つまりはiframeや背景画像と同じような扱いですかね。

レスポンシブや背景画像として使う場合など、今のところまだ対応していないので、おいおい理解していけたらと思います。

おわりに

コーダーを悩ませるIEのバグ。

「IEのサポートがついに終了！」という記事を目にしてついに終了か？と思った方もいるかと思います。

ですが結局のところ、根強くIEを使用しているユーザーも多くいて、IEがなくなるわけではないんですよね。

これからも柔軟に対応していかなければと思います。

以上、Maromaroのyamahanaでした。