IE6への対応はさすがにそろそろやめたいと思いつつ、この時代までよく頑張ったなあとむしろ賞賛してもいいぐらいだと個人的には思う。
そりゃあ挙動が統一されてなくて大変だけど、大抵IE6/7の挙動にさえ注意しておけば、変なことしない限り他のブラウザはほとんど何もせずに大体うまく行く。
IE6のバグで引っかかるパターンをいくつか知っていれば大抵大きな問題にならない。複数クラス名指定の問題とか、marginにまつわるいくつかの問題とか、float時に余計な余白ができる問題、透過PNG、マウスオーバー時の画像切り替えで毎回画像を読みに行ってしまうなど。
で、今回は数ある問題の中のひとつである、selectタグがz-indexの指定を無視して前に出てきてしまう問題を回避するための jQuery プラグイン bgiframe の話。
http://jqueryui.com/demos/dialog/#modal
例えば jQueryUI の上記ページでは bgiframe が使われていて、IE6 で見るとダイアログが表示されている間は select タグが消えている。
発想は凄いけど技術的には簡単で、filter: Alpha(Opacity=0) な iframe を画面を覆うように置いているだけ。
ただこれが微妙に厄介な問題を引き起こしていて、例えば iframe がありそうなところ(つまり暗くなっている部分)で右クリックしてソースを表示すると false と書かれているソースが表示されたり、このダイアログのタイトルバーをドラッグしてダイアログを移動させる際にマウスを高速移動させたり、右下のリサイズ用のグリップを掴んでリサイズしようとすると動作が引っかかってしまう。
こういったいくつかの問題を回避するためには、bgiframeが生成するタグの出力を変更してしまうのが一番手っ取り早い。元々の出力は
<iframe class="bgiframe" ... />
のような感じになっているので、これを
<div class="bgiframe" ... >
<iframe ... />
<div ... />
</div>
こんな構造にして、iframeと同じサイズで上からdivを被せるようにするだけで解決する。
元々 bgiframe の動作は expression で iframe のサイズを決定しているので、その処理自体は親の div に行い、中に持っている iframe と div は width:100%;height:100%; にすると比較的美しいコードで仕上がる。
こうするだけで簡単に変な悩みのタネをひとつ減らせる。
あとIE6の判定は $.browser.msie 使うなら $.browser.version も併用するとか、使わないなら
/*@cc_on!@*/0&&typeof document.documentElement.style.maxHeight=="undefined"
みたいにやるとか、中途半端な現状はどっちかにしてしまってもいいのかも、とは思いますけどまあこのままでも上手くいくからいいか。
あとはオプションの src のデフォルト値の javascript:false; って javascript:false の間違いか? とか。まあこれも別に動いてるならいいのかな。
あと opacity のオプションいるのか? とか。
まあ、こんなノウハウ必要なくなればいいのにね、という話ではある。