技術ブログを開設する
ログイン
もっと気軽にアウトプットできる技術ブログプラットフォーム
この投稿は別サイトからのクロス投稿です(クロス元:https://dolphin-rokujiro.com/wor...

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

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

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

display:flex


flex boxは、簡単にブロック要素を横並びにできるだけでなく、コンテナーのサイズに合わせて伸縮するような、いわゆるレスポンシブデザインにも楽に適応できることから使用頻度も高いと思うのですが、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プロパティ非対応なんですね。
また、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がまだまだ多いのではないでしょうか。

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

ちなみに、IEの開発者ツールにある、各バージョンのIEのエミュレート機能(IE10モード、IE9モードなどで表示する機能)は、個人的には信用できないと思っています。
先に挙げたdisplay:flexが効かない問題が、エミュレート機能で、IE10に切り替えて確認したところ再現できませんでした。

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

まとめ


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

追記
マイクロソフトから「IEをやめて、Edgeに移行すべき」という声明が公式で出されました。
以下に詳細をまとめています。
https://dolphin-rokujiro.com/work/ie_support/

関連記事

この記事へのコメント

まだコメントはありません
3
@rokujiroの技術ブログ
3
このエントリーをはてなブックマークに追加