読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

本当にあった怖いIE対応の話

WebDev HTML&CSS

 身近なIE環境は、今同じ家に住んでいる人のWindows XPに入っていた、バージョン8しかなかった。IEのバージョン8と9の間には、結構大きな溝があり、8以下の対策となるとそれはまたやっかいになるので、私はモバイル対応を含めてRWDでやるかわりにIE8以下は切り捨てるという方針を取っている*1
 1,2ヵ月前から、その唯一のWindows環境がXPサポート終了に伴い、バージョンがアップデートされた。昨日、ふとそのことに思い当たった私は、「いまあのパソコンのIEってバージョンいくつなんだろか」と気になり、久々にIEチェックを行うことにした(ふだんは、自分のMacBook Pro+Chromeが基本です)。Windowsのアップデートに合わせて、Internet Explorerもver.8から一気に11まで上がっていた。そこで、私のサイトのURLを打ち込んでどんなものか見てみた。
f:id:sthmdnss:20140628230718p:plain
 愕然とした。何一つ8時代と変わっていなかった。ChromeFirefoxでは正しくレイアウトされているサイトが、IE11ですらぐちゃぐちゃになっていた。妙に変だなぁ。だっておかしいじゃないですか、IE11ですよ。さすがのIEだって、11くらいになればそれなりに機能を備えているはずなのに。
 とりあえず、慣れないIE11の開発ツールを開いた。その中に、エミュレータというようなものがあったので、押してみると「ドキュメントモード」というのがあり、それがIE7(既定)に合わさっていた。これを、IE9やIE10に合わせると、IEでもちゃんと表示された。つまり、IE自体に表示能力がないということではないとわかった。ではなんなのか。
 いくつかサイトを巡り、いろいろ原因を探っていたとき、「IE7(既定)」が引っかかった。既定ってことは、自分で設定しているってことか?と思ってソースを見た。内にその原因を見つけた。

<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7"/> 

これを、あるサイトの書いてあった

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

に置き換えることで、IEでも対応していた9,10,11についてはおおむね良好に表示されるようになった。
 それにしても、content="IE=emulateIE7" の部分をどこからどう引っ張って来たのか思い出せない。昨年9月にWordPressに乗り出して試行錯誤のなか、コピペする中で紛れてしまったものだと思われる。
 反省点としては、IE8しか環境が無かった時に、「まぁ、8じゃダメだけれど、いちおうやることはやってるから、9以上なら表示されているはずだよね」とちゃんと実機でのテストを怠ったこと。そもそも8の時ですら、content="IE=emulateIE7" で7の状態で表示されていたのだ。やっぱり、Modern.IE導入する必要があるか。
 サイトを開設して半年、これが原因で何人のユーザーを失ったのかと考えると、頭を抱えてしまう…。IEユーザーの皆さん、本当にすみませんでした。
後記
 今回コピペしたものですら、何かしらのトラップになる可能性がある。あまり時間は割けられないけれど、IEに対する知識も入れないといけないと実感した。

*1:それでもrespond.jsやhtml5shiv.jsを入れるくらいのことはしているのだが