というバグがあるらしく、このサイト などでもわかりやすく紹介されているのですが、はずかしいことに自分、先日まで知らぬままでした。例えば、タブ形式とかプルダウンメニューで z-index で制御する機会なんてざらにあるのに、こんなバグなどあったら相当難儀なのではないでしょうか。かくいう自分がかなりハマりました。
INFO: How the Z-index Attribute Works for HTML Elements
http://support.microsoft.com/default.aspx?scid=kb;en-us;177378
上記ページに詳細が書かれてあるんですが、要約すると「IEでは、select は windowed element であり、HTML element ではない。したがって、z-index に準拠した動作はしない」とのことで、これはバグではないといいたげで、なんというか...。
ただ、いろいろ探してみると、解決方法はあるようで、
Sample for using a DIV IFRAME shim to cover over
SELECT Boxes and other windowed controls in IE.
http://dotnetjunkies.com/WebLog/jking/archive/2003/10/30/2975.aspx
上記にあるように、iframe タグを組み合わせれば、意図した制御ができるようになるそうで、いろんなサイトの実装を見てみると、例えば、
Yahoo! User Interface Library
http://developer.yahoo.com/yui/
などがそんな対処方法をしていました。が、iframe は XHTML の最新バージョンで仕様から外れてしまっている(代替としてobject)ようで、この対処方法も将来的には見直しが必要になってしまいそうです。
selectタグのバグ回避の為、いろいろとサイトを巡ってこちらにたどり着きました。
上記の記事、大変参考になりました。
ご参考になるかはわかりませんが、overflow:autoをかけるとiframe同様に消えてくれました。
例:
test
test
test
test
選択してください
選択してください
選択してください
test
test
test
…ちょっとコメントが汚れてしまってすみませんm(_ _)m
おー、ありがとうございます。今度ためしてみますー。