IE（Internet Explorer）…WEBサイトを見る際にこの名前を聞いたことがあるのではないでしょうか。
ピンとこない方はこちらの記事をご覧ください。

関連記事

Internet ExplorerでWebサイトが崩れる？大手サイトも切り離したIEとどう付き合うか

PCでWEBサイトを閲覧していると、洗練されたおしゃれなサイトに出会うことがあります。 けれどそのサイト、実はInternet Explorerでは見ることができないサイ...

ここでは、そんなIEの
「フロントエンドエンジニアから見て何がだめなのか。」
を7つのケースに絞ってご紹介したいと思います。（本当はもっとあります）
そして、タイトルに記載した
「Edgeの世界へ強制的に連れていくお話」
をしていきたいと思います。
フロントエンドエンジニアの方々には朗報かもしれませんね。

IEフロントエンドエンジニアに嫌われてしまう理由（サイトが崩れる）

ケース01：WEBフォント・フォントが反映しない。

サイトを見ていると文字の字体（フォント）が違うものがたくさんあると思います。
近年では、フォントをWEBフォント化するというのが主流になっています。
そのフォントをWEBフォント化する際に元のフォントファイルがWOFF（Web Open Font Format）でないと・・・
「IEだけフォントが違ったように見えてしまう」
ということが発生してしまいます。

例：IEだけうまくいかない場合。

@font-face {
  font-family: 'urbanproject';
  src: url('../font/BAHNSCHRIFT.ttf) format('truetype');
}

例：IEでもうまく表示させる場合。

@font-face {
  font-family: 'urbanproject';
  src: url('../font/BAHNSCHRIFT.woff) format(woff);
}

ケース02：文字の高さの計算が違う！？

文字にはそれぞれ高さと、基準となる線（ベースライン）というものが存在します。
FirefoxやChromeやEdgeは表示にさほど差が出る事はないのですが、IEになると下図のように崩れてしまいます。

ケース03：position:absolute;がIEだとずれてしまう!?

position:absolute;は
「画像の上に文字を置きたい。」
「画像の上にボタンを設置したい。」
というときに使用するcssのコードなのですが、中央に持ってくる方法のmargin:auto;がうまくいかない時があります。

ケース04：display:flexの設定が狂う。

先ほどのposition:absolute;とは別に
「ある枠の中を基準として上下中央に表示する。」
という方法です。上下中央にしたい要素にmargin:autoをかけた場合下図のようにずれてしまいます。

ケース05：Videoタグに入れているmp4がうまく映らない。

近年主流となってきている動画の拡張子（mp4）。
このmp4にもいろいろなエンコードがあり、エンコードの設定によってはIEだけ動かないということがあります。特に要注意なのが「mpeg-4」というエンコードです。

ケース6：mainタグがまさかのinline…

mainタグは「このページのメインはここです！！」ということを知らせるHTMLのタグです。
IEのみ、このmainタグがdisplay: inline;として認識されてしまうようです。

ケース7：position:sticky;が使えない。

「このコンテンツが始まってから、左のサイドバーをページの上部に追従させたい。」
というときに使用するCSSのコードなのですが、IEだけ使うことができません。
JSを駆使して作っていくしかないのです…（ということは工数・費用がかかるということです。）

Edgeの世界へ強制的に連れていくお話

という具合で、サイトの表示に優しくないIEですが、ここからは思考を変えて
「IEでサイトを見た際に強引にEdgeが開くようにする」
という話をしていこうと思います。

まずはIE互換性リストへのリクエストをする

手順としてはIE互換性リストietoedge@microsoft.comにリクエストします。

■IE互換性リスト
https://edge.microsoft.com/neededge/v1
リクエストが受け付けられたら、ここに登録され、設置完了です。

IEユーザーがアクセスすると

IEユーザーが、IE互換性リストに登録されているURLにアクセスした際、
ユーザーが別のブラウザーを使用する必要があることを示唆するメッセージを表示します。

【IEでの表示】

【ダイアログの表示（一回限り）】

Microsoft Edgeにリダイレクトして下記のようなダイアログが表示されます。
すると、一回限り下記のダイアログが表示されます。
内容としては、以下の点です。

Webサイトがリダイレクトされる理由と、閲覧データと設定をIEからMicrosoftEdgeにコピーすることに同意を求めるメッセージが表示されます。

【非互換性バナーが表示】

Microsoft Edgeにリダイレクトされたアドレスバーの下にWebサイトの非互換性バナーが表示されます。
ここで、MicrosoftEdgeをデフォルトのブラウザとして設定する事を勧める文言が表示されます。

ダイアログの表示は一度きりでしたが、IEでの表示、Microsoft Edgeリダイレクトの表示がサイトにアクセスされる度表示されるようになります。
詳しくは下記Microsoftのサイトよりご確認下さい。
https://docs.microsoft.com/en-us/microsoft-edge/web-platform/ie-to-microsoft-edge-redirection

最後に

未だにIEを利用しているユーザーの中には、社内システムの関係だったり、古いPCを利用していたりと利用せざるを得ない様々な理由があるかとは思います。

しかし、IEユーザーがいる限り、今回触れた表示崩れの問題を回避するべく、多くのエンジニア達が頭を抱えているという現実があります。

それだけでなく、IEを利用するという事は、個人情報をさらけ出し、殺伐としたスラム街で玄関のドアを全開にして生活しているのと同じぐらい危険な行為です。
攻撃者から情報を盗まれたり、ウィルス攻撃を受けてしまい、果ては知らない間に、IEユーザー自身が攻撃者になってしまう。と、いう事を認識しておく必要があります。

そんな不幸を減らしていく為の一つのきっかけを作る事…それも私たちWEBサイトに関わる人間に託された任務の一つではないか。と感じます。
今回ご紹介した「IEからEdgeへの強制転送をさせる機能」がより浸透していく事で、不幸な人が少しでも減っていく事を願って…今後のWEBがより良いものになっていきますように。