IE6 以前のブラウザだと、select プルダウンエリアが常にページのトップレイヤに表示されてしまうというバグ（仕様？）があります。
ページ内にDivタグとかをフロートウィンドウっぽく表示させたり、ドラッグオブジェクトを作ったりすると、結構やっかいなことに。
それを回避する方法として、以下の3つが挙げられます。
1.select のスタイルを display:none にする。
重なっているときは、見えなくすれば良いってことで、こういう対応がまあベタですね。
ただ、フロートウィンドウを select ボックスがあるページ内でドラッグさせたいときは、一々ウィンドウの位置とselect の位置を判定して、表示／非表示を切り替えることを考えねばならず、あまり現実てきじゃないです。
2.iframe を使う
HTMLElement の中で例外的にiframe だけは select ボックスの上に表示することができます。
ということで、ブラウザがIE6以前のときのみ、select の上に表示するオブジェクトの下にiframe を入れて、src は javascript:false style に filter : 'alpha(opacity=0)' を指定してやればOK。
jQuery プラグインの datepicker や YUI のカレンダーなど、ページ内でドラッグさせる可能性があるものについては、そういう対応がしてあります。
3.select を使わずプルダウンを自作する
select じゃなくてそれっぽく見えるモノを作っちゃう系の対応です。
Select Box replacement
jQuery Select box
↑こんな感じかな。
クロスブラウザ対応がめんどくさそうですが、上手く使うと面白いU/Iになったりします。
Google Reader の上方にあるのも、その一例ですね。
↓こんな感じでプルダウンの中に文字を入力できるようになっています。
↓「i」と入力すると、候補がリストに。
form に関連するものを自分で作り込んでいくのは、submit処理やライブラリの利用に影響が出そうですが、インターフェースを考える上で、その部分をちょっと検討するのも悪くないんじゃないかと思います。
| 固定リンク
|
