エスキュービズム ラボ Blog

IEとfirefoxなどのブラウザ間でjavascriptの仕様が違うというクロスブラウザ問題。最近はjQueryなどのライブラリを用いることによって、その違いをライブラリが吸収し、開発が容易になっています。しかし、残念ながら、jQueryを使っても、結構、クロスブラウザ問題にはまってしまいます。以下、そのようなはまった点についてまとめみます。

１．連想配列の最後のカンマ。firefoxだと無視されますが、IEだとエラーになります(例)。分かっていても、ついやってしまいます。

２．width/heightの解釈の違い。前回のブログにも詳細が書いてあります。jQueryのwidth()/height()でもその違いは吸収できません。前回のブログにあるように、DOCTYPEをきちんと指定するしかないようです。

３．z-Indexの解釈の違い。firefoxではz-Indexが最優先なのに対し、IEではz-Indexがhtmlの構造に依存します（参考）。

４．jsonpのレスポンスヘッダ。IEだと’text/html’にすると受け付けません。サーバーサイドで、’application/json;charset=utf-8′などにする必要があります（参考）。

５．forEachやmapなどのjavascript1.6の新機能。基本的にはIEで使えません。IEで使うにはfirefoxのページで公開されてる互換性パッチ（例）をソースに組み込む必要があります。

６．Canvas。IE以外ではデフォルトで使用できますが、IEで使用するには、ExploreCanvasのようなライブラリを読み込む必要があります（参考）。ただし、ExploreCanvasでは多少の機能制限があります。

７．jQueryのeventhelpersにないイベントに注意。特にmouseenter/leaveです。jqueryでbind(’mouseenter’,fn)などで呼び出せますが、IEとfirefoxで違います。IEだとイベント発生のオリジナルの子要素が取得できません(参考)。IEでの子要素取得には、mouseenter/leaveを拡張したjQueryのmouseover/outによって可能ですが、mouseoverのイベントは子要素に入ったとき全てにおいて発動するので、もとのmouseenterと挙動が異なるので注意が必要です。

とりあえず以上です。あと、ライブラリにある関数は一通りチェックして、極力使用するようにしたほうがいいと思います。何かしらクロスブラウザ対応しているので。