IEに対応してといわれたのですが、どうすればいいのでしょうか？(metaタグには記載しているのですが)

Question

上記タイトのご相談です。IEに対応してといわれ下記のタグはもともといれていたのですが、
それ以外に追加すべきタグはあるのでしょうか？
<meta http-equiv="X-UA-Compatible" content="IE=edge">

これ以外に追加すべきタグがあるのでしたらご教示願います。

Comments

[m.ts10806]

対応の範囲を明確にする必要があります。バージョンがその1例ですが、「何をどう対応するか」も明確にする必要があります。

Answer 1

まずは、対応すべきIEのバージョンを確認して下さい。IE 11ならともかく、「IE 8から対応してほしい」と言われたときは、泣いて下さい。

そして、実際にIEで動作を確認しながら、問題のあるところを書き換えていく、という地道な作業が必要となります。IE 11でもHTML5、CSS3やES6の新機能にはあまり対応していないので、Can I useなどで「非対応」となれば回避して別な書き方が必要となります。

Comments

[miyabi-sun]

maisumakunさんの記事にぶら下げます。

より具体的に言えば下記でしょうね
・レイアウト崩れが発生していないか保証してくれ
・JavaScriptがちゃんと動くか保証してくれ

IE8や9なんて古すぎて動かない機能が山ほどあるので、HTML＋CSS＋JavaScript部分の開発費用を倍額にしないとやってられないですね。
最低でもIE11を勝ち取るようにまずは顧客と交渉したほうが良いかと思います。

[akkkkin]

かいとうありがとうございます。
＞IE11を勝ち取るように
これですと
<meta http-equiv="X-UA-Compatible" content="IE=edge">
のタグで問題解決するのでしょうか？

[maisumakun]

残念ながら、それでも解決はしません。実際、「Array.fromがなかった」とか「CSSのinitial値が効かない」など、ほかのブラウザではある機能がIE11にはない、というのが大量にあります。

Answer 2

metaタグを１行書けば対応できるとかそんな単純な話じゃないですよ。
他の回答者も書いてますが、IE対応は倍の工数がかかります。

IEは8,9,10,11でまったく挙動が違います。
同じhtml/css/javascriptでスタイルがずれたり、javascriptがエラーになったりします。

なので8,9,10,11すべての環境で同じように動くように修正とテストを繰り返す必要があります。
※8を対応が完了したので9の対応のためにコードを修正したら8がまたおかしくなったとか、そういうのもあります。

html5に対応していないIEのために、html5を無理やりサポートさせるライブラリhtml5shiv.js もあります。UAを判定してIEだったらこれを読み込むなども対応のひとつです。

Comments

[akkkkin]

なるほどです、こういったライブラリがあるんですね。
手間を極力おさえつつ、IEに対応するには最善かもですね。
ありがとうございます。

Answer 3

IEに対応

それってたんにmetaの話なのでしょうか？
IEはバージョンによって挙動が独自なのでそれらへ動作を
オーソライズするためにjQueryなどで吸収することがあります。
最新でないIEに対応が必要であればバージョンにあわせた
記述をするしかないと思います。

Answer 4

IE 11でさえ、よく使われる以下の項目に対してポリフィルを用意したり、代替方法に置き換える必要があります。jQueryを使うことで多少は緩和されるかもしれません。もしIE 11ではなく、IE 10や9、あるいは8だったら……

・HTML 5
main 要素 / a download / template 要素 / input type=date、time、color / output 要素 / canvas.toBlob() / dialog 要素

・JavaScript, DOM等
Element.classList / Array.prototype.find() / for ... of / Promise / アロー関数 / ChildNode.remove() / テンプレート文字列 / デフォルト引数 / Fetch API / NodeList.forEach / Element.matches()
async, await / Intersection Observer API / Array.prototype.includes() / Element.closest() / EventTarget.addEventListener options / URLSearchParams

・CSS
resize / display: grid / justify-self / ::backdrop