なんかかきたい

プログラミングなどの個人的なメモやサークル「ゆきいろパラソル」の情報を載せてます

Internet Explorer 10 がクラッシュする

Internet Explorer

IE10でサイトを閲覧するとクラッシュするらしい、何とかしてほしいとの依頼。 これだけの情報だけではどうにも解決できないので、いろいろ調べていったのだけど、この手の検証作業は今後も行うことがあるだろう、ということでどのように進めていったのか自分用にメモ。

まずは、自分のPCで確認してみようと思い手元のWindowsノートPCを起動。 IEを起動し、バージョンを確認。当然のようにIE11がインストールされていた。

IE8以降には古いIEでの見え方をシミュレートして確認できる機能が搭載されているのでまずはこれを使ってIE10互換表示に切り替えてみた。 F12を押して開発者ツールを起動し、シミュレートタブで切り替えをしてみる。 ところが、報告されているようなIEがクラッシュするということはなかった。

ここで検証をやめても仕方がないので、まずはIE10が動く環境を用意することにした。

Windows環境を用意する

検証用に使うWindowsをひとつ用意します。 余分なアプリケーションはインストールせず、クリーンな状態にします。 というのは普通にPCを使っている場合にはかなり難しく、変なライブラリなどがインストールされていることがあってなかなかクリーンにはならないですね。 仮想マシンを用意するのが一番よいかも。

複数バージョンのIEをインストールする

特に古いIEで動作確認する必要がある場合には、「Utilu IE Collection」のような複数のIEをまとめてインストールできるツールを使う。

Utilu IE CollectionはIE1～IE8までをインストールするが、今回はIE10の検証を行いたかったので役には立たなかった。

で、いろいろ調べてみたところ、IEのテストを簡単にできるようにMicrosoftがIE検証環境をVMで配布してくれていることがわかった。

ホーム | Internet Explorer の検証がより簡単に | modern.IE

今回はこれを使うことに。 Hyper-V, VirtualPC, VirtualBox, VMwarePlayerとメジャーどころのイメージが用意されていて便利なので、ぜひとも覚えておきたい。 ただし、WindowsのVMをまるごと落としてくるので、ダウンロードには時間がかかる。 あと、初期のメモリ割り当てが512MBになっているようで、そのまま使うとメモリ不足でブルースクリーン行きになることが多いので注意が必要。

ライセンス的な注意点としては、ひとつのVMは最長で90日しか使えないということと、IEテスト用にしか使ってはいけないということくらい。 90日以上経過したVMは一度破棄する必要があるが、再度セットアップするのは問題ないらしい。

あれやこれやと試して、IE10検証環境を手に入れ早速問題のURLを打ち込んでみると、なるほど確かにクラッシュした。

基本事項の確認

IEがクラッシュするといえば、大抵の場合アドオンとの相性問題だったり、ハードウェアアクセラレータの関係だったりすることが多いので、まずはその辺りを中心に調べ始めてみた。 ハードウェアアクセラレータはインターネットオプションから無効にできる。デフォルトでは有効。切り替え後にはIEの再起動が必須なので注意。 VM起動直後にサイトを開いたにもかかわらずクラッシュしたことからアドオンは今回は無関係なようだ。

特に理由はないけれども、互換モードで表示した場合どうなるか試すと、IE10, IE10互換モード, IE9の場合にはクラッシュ、IE8以下互換モードではクラッシュしなかった。

原因はCSS？

サーバ側の問題か、HTMLの問題か切り分けるため、Firefoxなどの他のブラウザでHTMLをそのままの形で保存し、そのファイルをIE10で開くことにした。 すると同じようにクラッシュしたので、どうやらHTMLに問題があるらしいというところまで絞り込めた。

後は、DOMをいい感じに削っていき問題のある箇所を特定することになった。 Windows標準搭載のメモ帳の利用は避け、他のテキストエディタを利用する。 HTMLタグをうまく解釈できるテキストエディタなら何でもよいけれども、今回はNotepad++を使った。

二分探索の要領で半分くらいずつガッツリ削っていくと、ひとつの行にたどり着いた。 何の変哲もないHTMLだが、この行がある場合にはクラッシュ、そうでない場合にはクラッシュしないのだ。

明確な原因ははっきりしないものの、CSSのtext-overflow: ellipsisやwhite-space: nowrap辺りが怪しいというところまで突き止め、該当するスタイルを書き換えるとクラッシュしなくなることを確認。やれやれ。

ところで、IE9ではクラッシュしなかったのでIE10で特定のタグとスタイルを組み合わせた場合にのみ起こる問題っぽい。この辺りは細かく調べたい。

今日もIE対応のために多くの時間を費やしてしまった。やれやれですね。