文書の過去の版を表示しています。
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> <style type=“text/css”>
html, body{
height: 100%;
margin: 0px;
}
div.sample{
width: 300px;
height: 200px;
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;
display: none;
}
</style>
<script language=“JavaScript”><!–
var dragItem = null;
var initEventX, initEventY;
var initLeft, initTop;
//初期化処理
onload = function (){
document.documentElement.onmousemove = dragMove;
document.documentElement.onmouseup = dragOff;
}
//ドラッグ開始
function dragOn(obj, e){
var src = e.originalTarget;
if(document.all){
e = event;
src = e.srcElement;
}
dragItem = obj;
initEventX = e.screenX;
initEventY = e.screenY;
initLeft = parseInt(dragItem.style.left.replace('px', ''));
initTop = parseInt(dragItem.style.top.replace('px', ''));
return false;
}
//ドラッグ停止
function dragOff(e){
dragItem = null;
}
//ドラッグ移動
function dragMove(e){
if(document.all)e = event;
if(!e || !dragItem)
return;
dragItem.style.left = (initLeft + e.screenX - initEventX) + 'px'; dragItem.style.top = (initTop + e.screenY - initEventY) + 'px';
setShim(dragItem); return false; }
//shimの設定
function setShim(obj){
var shim = $('shim');
//objと位置、サイズを合わせる shim.style.left = obj.style.left; shim.style.top = obj.style.top; shim.style.width = obj.offsetWidth; shim.style.height = obj.offsetHeight; shim.style.display = 'block'; }
–>
</script>
</head>
<body>
<iframe scrolling=“no” frameborder=“0” id=“shim”></iframe>
IE6でselectタグ(プルダウン)がz-indexを無視する対策
<div onmousedown=“dragOn(this, event);” class=“sample” style=“left: 50px; top: 250px;”>
マウスでドラッグができます。<br />
width: 300px;<br />
height: 200px;<br />
background-color: #8888ff;<br />
position: absolute;<br />
padding: 10px;<br />
<b>z-index: 100;</b><br />
left: 50px;<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を無視する対策
