IEの罠 – JavaScript

最近、JavaScript のライブラリを作成しているが、IE対応はとても大変だ。
特に「ImageAdjustor」など、ピクセル単位でオブジェクトを配置する場合、罠が待っている。

大きな原因は3つ。

(1) 互換モード(IE独自のCSS解釈)と標準モード(W3CのCSS解釈)がある。
(2) 互換モードと標準モードで、ボックスモデルの解釈が異なる。
(3) 互換モードと標準モードで、オブジェクトが異なる。

なので、HTMLがどちらのモードなのか判断して、それぞれに対応する必要がある。

モードの判断は、FCKeditor を参考にして以下のように行っている。

if (document.getElementById && (document.compatMode == 'CSS1Compat')) {
// 標準モード
} else {
// 互換モード
}

ボックスモデルの違いは以下の様になる。

・標準モードの場合
width と height にボーダー幅とパディングを含まない(Firefoxと同様)。

・互換モードの場合
width と height にボーダー幅とパディングを含む。

また、あきらが必要としたオブジェクトの違いは以下のようになる。

・標準モードの場合
ドキュメントのWidth = document.documentElement.scrollWidth
ドキュメントのHeight = document.documentElement.scrollHeight
ドキュメントのLeft = document.documentElement.scrollLeft
ドキュメントのTop = document.documentElement.scrollTop

・互換モードの場合
ドキュメントのWidth = document.body.scrollWidth
ドキュメントのHeight = document.body.scrollHeight
ドキュメントのLeft = document.body.scrollLeft
ドキュメントのTop = document.body.scrollTop

自分だけが使うライブラリになら、HTMLを全て標準モードで統一すればよいが、一般的なライブラリを提供する場合は対応する必要がある。

まったく困ったブラウザだ。普及しているから、なお始末に終えない。


コメントを残す

メールアドレスが公開されることはありません。

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください