最近、JavaScript のライブラリを作成しているが、IE対応はとても大変だ。
特に「ImageAdjustor」など、ピクセル単位でオブジェクトを配置する場合、罠が待っている。
大きな原因は３つ。
(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を全て標準モードで統一すればよいが、一般的なライブラリを提供する場合は対応する必要がある。
まったく困ったブラウザだ。普及しているから、なお始末に終えない。