【IE対策】IEで互換表示を無効にしてもスタイルが崩れる原因になるもの【まとめ】

【IE対策】IEで互換表示を無効にしてもスタイルが崩れる原因になるもの【まとめ】

こんにちは。
ここ最近、IEでスタイルが崩れる現象がちょくちょくあって、困らされています。
IEのスタイルが崩れる原因と対策を調べると、
「互換表示を無効にする」という対策がよく挙げられます。
これで解決される場合も多いのですが、
解決できないとなると、なかなかしんどいですよね。。

そういう時は、スタイルが崩れている要素に指定している
CSSが効いているかチェックするべきですが、
可能な限り、コーディングの時点で
IEではどのCSSが効かないのか、
どんな対策が必要かを知っておけば、楽ですよね。
そこで、今の時点で自分が把握している分を挙げていきます。

これは、今後もどんどん追記していくつもりです。

IE対策が必要なCSSプロパティ

display:flex

これは、簡単にブロック要素を横並びにできるだけでなく、
コンテナーのサイズに合わせて伸縮するような、
いわゆるレスポンシブデザインにも楽に適応できることから
使用頻度も高いと思うのですが、
IE10では接頭辞をつける必要があります。

display:flexのブラウザ毎の対応状況は
mozillaの公式ドキュメントが詳しいです。
(mozillaの公式ドキュメントは、
html、cssのタグやプロパティの仕様、コーディング例などが豊富なので、
とても参考になります。)

ちなみに、IE10でdisplay:flex及び、その他のプロパティを使う場合は
以下のようになります。

//通常
display: flex;
justify-content: space-between;
align-items: center;

//IE10
display: -ms-flexbox;
-ms-flex-pack: justify;
-ms-flex-line-pack: center;

 

unsetプロパティ

これはつい最近知って驚きました。
IEはunsetプロパティ非対応なんですね。
僕が最近出くわしたパターンは、レスポンシブ対応したwebサイトで、
画面サイズによって、max-widthを指定するようなコーディングをしており、
デフォルトでは「max-width:unset;」という指定をしていました。
しかし、IEではunsetプロパティが無いためレイアウトが妙なことに…
とりあえずmax-width:none;と書き換えて対応しました。

また、initialプロパティも非対応です。
これは十分気をつけないといけないですね。

ちなみに、これらのプロパティはEdgeでは対応しているようです。

mainタグがブロック要素じゃない

地味ですが、mainタグがIEではブロック要素として解釈されないようです。
mainタグにmarginが効かないなどの現象が発生する可能性があります。
対策としては、単純にcssでdisplay:blockをかけてあげましょう。

CSS変数が使えない

これも地味に困りますね。
例えば、サイト上でよく使うカラータグなんかを変数として保持するパターンがあるかと思いますが、
それがIEでは適用されません。
CSS変数について詳しくは以下をご覧ください。
https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variables

これに関しては、IEだけは割り切って変数を使わずに
CSSの値を指定してあげるしかないかもしれないですね。

aタグのdownload属性が効かない

これはCSSに関することではありませんが、致命的です。
HTML5でaタグのdownload属性が追加されたことで、
htmlだけでファイルをローカルにダウンロードすることが出来るようになりました。

しかし、IEはそうはいきません。
IEでも対応しようと思うと、Javascriptの処理を書かなければいけないのですが、
僕の試した限りでは、
IE用のダウンロードリンクとそれ以外のブラウザ用のダウンロードリンクを分けなければいけないようで、
ちょっと微妙だな..と。
ちなみに以下の記事を参考に対応したところ、とりあえずは問題無く動作しました。
【JavaScript】IEのためにa要素のdownload属性を代替する

ダウンロード機能の重要度と、ユーザーがIEを使用している割合、手間等の兼ね合いを見ながら、
対応すべきか判断することをオススメします。

IE対策について考える

同じIEでもバージョンによっても、もちろん挙動が異なりますし、
対応方法すら変わってきます。
どのバージョンまで対応すべきかというところになってくると思いますが、
皆さんどこまでやってるのでしょう?

個人的には
IE9以前 → 対応しない
IE10 → 対応する
IE11 → 対応する
という考えです。
IE11に関しては、今までのところ、そこまで困らされたことが無いのですが、
厄介なのがIE10ですね。

windows10であれば、強制的にIE11しか使えず、
むしろデフォルトのブラウザがEdgeになっているので問題ないと思いますが、
windows7だとおそらくIE10がまだまだ多いのではないでしょうか。

意識的にしろ、無意識的にしろ、
2年前にあった、windows7からwindows10への半強制アップデートに抵抗し
未だにwindows7を使っているユーザーは多そうですしね。

ちなみに、IEの開発者ツールにある、
各バージョンのIEのエミュレート機能(IE10モード、IE9モードなどで表示する機能)は、
個人的には信用できないと思っています。

先に挙げたdisplay:flexが効かない問題が、
エミュレート機能で、IE10に切り替えて確認したところ再現できませんでした。

しかし、実際にIE10がインストールされているPCで確認したところ、現象が再現。
ということは、エミュレート機能で問題無ければ大丈夫。というわけではない…?
めんどくさい٩( ᐛ )و

まとめ

とにかく、IEはめんどくさい٩( ᐛ )و
けど、ユーザーは悪くないし、放っておくわけにはいかないので、
頑張って対応しましょう。

2018/07/24 追記
マイクロソフトから「IEをやめて、Edgeに移行すべき」という声明が公式で出されました。
以下に詳細をまとめています。

【IE11サポート終了?】IEからEdgeに移行すべきとの声明が発表


やった!