HTML・CSSでサイトデザインを作って、いざブラウザで確認してみたら、
「IEだけデザインが崩れる。。。(他のブラウザは問題ないのに)」
という経験、Web開発者ならだれでも一度は経験したことがあると思います。
余白(padding, margin)が効いてない、特定のCSSが無効になる、などなど。
特に、IE6~8ぐらいの時代を生き抜いた開発者の方々は大変な思いをしてきたと聞きます。（私はその頃まだ学生だったので深くは知りませんが。。。）
大抵の場合、IEだけのために別対応をするなどして凌いでいると思いますが、
そもそも、どうして「IEは崩れるけどIE以外のブラウザでは大丈夫」という現象が起きてしまうのか。
今更ながら気になったので調べてみました。
ブラウザごとにレンダリングエンジンが違う
同じHTML・CSSを適用しているのにブラウザによって表示が変わるということは、ソースコード以外の部分で何か違いが存在するということです。
調べてみると、レンダリングエンジンというワードに行き着きました。
レンダリングエンジンとはざっくりいうとページのHTML・CSSソースを読み込む役割をもつエンジンです。
このレンダリングエンジン、ブラウザによって違うものを採用していることが多いです。全部挙げると結構な数になるので代表的なブラウザにだけこの記事の後半に紹介しています。
また、それぞれのレンダリングエンジンでHTML・CSSの読み込み方法が微妙に違うそうです。なにやらこの違いがIEでのズレを引き起こしているような気がしてきました。
IEのデザイン崩壊の原因はレンダリングエンジンのせいだった
レンダリングエンジンについて 更に調べてみると、IEではTradient（トラディエント）というレンダリングエンジンを使っているそうです。
Wikipediaによると、TradientはIE4.0の頃（1997年）からずーーっと使われ続けているらしく、わりと長年選手です。Windows10からは標準ブラウザがEdgeに変わり、後述するEdgeHTMLをレンダリングエンジンとして使うようになったためTridentの出番は少なくなり、開発も終了したそうです。
そんな歴史深きTridentは、バージョンアップのたびに過去バージョンとの互換性維持を優先することが多く、そのせいで最新の規格や仕様に対応していないことがしばしばありました。そのため、ほかのブラウザでは表示できることがTridentでは崩れてしまうといった問題が発生するそうです。
はい、犯人はTradientでした
冒頭の問い、
「IEは崩れるけどIE以外のブラウザでは大丈夫なのはなぜか」
の答は、レンダリングエンジンが最新規格に追いついていないからが答です。
最後に代表的なレンダリングエンジンを紹介して終わりたいと思います。
IE：Trident（トラディエント）
上述したとおり、IE4.0の時代からある長年選手のレンダリングエンジン。
IEでHTML/CSSが崩れるのはこやつのせいでした。
Edge：EdgeHTML
EdgeではEdgeHTMLというレンダリングエンジンを使っています。
Tridentをベースに作られたらしいです。Edgeはあんまり使わないので書くことがない。
Chrome:Blink
GoogleChromeではBlinkを使っています。
以前はSafariと同じWebkitを使っていたそうですが、途中でBlinkに移行したとのこと。
Safari: Webkit
Appleが開発しているオープンソースのレンダリングエンジン。
昔はChromeもWebkitだったが、「俺たちでもっといいレンダリングエンジン作ろーぜ！」ってなってGoogleはBlinkを作ったため、GoogleChromeはBlinkに移った。
FireFox：Gecko
FirefoxではGeckoというレンダリングエンジンを使っています。
あまり使わないので何も書くことはない（二度目）
