日本では Internet Explorer(IE)には少ないながら利用者がいるため、当サイトも IE に対応させました[2023 年から対応外としました]。

しかし、IE にはモダンブラウザ(Edge、Chrome、Safari、FireFox など)に無い独特のバグがあり、IE 対応は中々厄介です。

当サイトの制作時に発見した IE のバグとその対処法をまとめておきます。

CSS のメディアクエリ内の疑似要素に単位 em の font-size の指定が重複するとそれらの数値を掛け算してしまう

バグが発生するコードの例

このコードではメディアクエリで疑似要素への font-size の「2em」と「1em」の指定が重複しています。

モダンブラウザでは一番下の「1em」が優先適用されますが、IE ではなんと2×1em＝「2em」として処理されるのです。

IE でこの記事を見ると、「実行結果」の一番上の文の文字サイズが大きくなっているはずです。

対処法

対処法としては、メディアクエリで疑似要素への指定が重複しないようにすることです。

重複しなければこのバグは発生しません。

CSS の animation で calc()が認識されない

バグが発生するコードの例

このコードでは animation-duration の値に calc()が使われています。

IE でこの記事を見ると、「実行結果」のアニメーションが動いていないはずです。

IEには、animation-duration など animation 関係のプロパティの値で calc()が認識されないバグがあり、animation 自体が動かなくなってしまいます。

対処法

対処法としては、calc()を使わずに値を記載することです。

例えば、上のコードの「calc(2s * 2)」ならば「4s」と書き換えます。

table のセルに border-collapse: collapse; を適用すると text-shadow が効かない

このコードでは table に border-collapse: collapse; と box-shadowが指定されています。

IE でこの記事を見ると、「実行結果」の表に陰が付いていないはずです。

IE では table に border-collapse: collapse; を指定するとセルに box-shadow が効かなくなるバグがあります。

対処法

IE のみに border-collapse: separate; を指定して box-shadow が効くようにします。

但し、表を区切る線の太さが2倍になってしまいます。

例えば上の実行結果の場合、青マーカーのコードを追加します。