Overlapping select field bug in IE 6
IE6ではselectタグ(Drop-down list)がDivレイヤーの上に、表示されるバグがある。
SelectタグをWindowsコントロールを使用して表示しているが、z-indexを無視するため、
selectタグが一番上に表示されることなのだ。
それを回避する方法がいくつあるが、ここではiframeを使い回避する方法を紹介する。
Demo page
<html> <head> <script type=“text/javascript” src=“./test/js/jquery-1.4.2.js”></script> <script type=“text/javascript” src=“./test/js/jquery.draggable.js”></script> <style type=“text/css”>
div.sample{
width: 300px;
height: 240px;
background-color:#8888ff;
position: absolute;
padding: 10px;
z-index: 100;
}
select.sample{
z-index: 1;
position: absolute;
text-align: center;
border-style: solid;
border-width: 2px;
border-color: red;
}
#shim{
z-index: 10;
position: absolute;
visibility: hidden;
}
</style> <script language=“JavaScript”> <!–
$(function(){
$("#block").draggable();
});
–>
</script>
</head>
<body>
<iframe scrolling=“no” frameborder=“0” id=“shim”></iframe>
IE6でselectタグ(プルダウン)がz-indexを無視する対策
<div id=“block” class=“sample” style=“left: 150px; top: 250px;”>
マウスでドラッグができます。<br />
width: 300px;<br />
height: 240px;<br />
background-color: #8888ff;<br />
position: absolute;<br />
padding: 10px;<br />
<b>z-index: 100;</b><br />
left: 150px;<br />
top: 250px;<br />
<br />
移動するたびに、setShim関数でこのdivにiframeを重ねています。<br />
</div>
<select class=“sample”>
<option>z-index: 1;</option>
<option>position: absolute;</option>
<option>left: 300px;</option>
<option>top: 20px;</option>
<option>text-align: center;</option>
<option>border-style: solid;</option>
<option>border-width: 2px;</option>
<option>border-color: red;</option>
</select>
</body>
</html>
===== iframe issue =====
iframeタグがHTML4.01 Strict 及びXHTML1.0 Strictでは未定義というので、この回避策は使えない。
===== reference =====
- IE6でselectタグ(プルダウン)がz-indexを無視する対策
- jQuery: 独自のプラグインを作成する
