Overlapping select field bug in IE 6

IE6ではselectタグ(Drop-down list)がDivレイヤーの上に、表示されるバグがある。
SelectタグをWindowsコントロールを使用して表示しているが、z-indexを無視するため、 selectタグが一番上に表示されることなのだ。

それを回避する方法がいくつあるが、ここではiframeを使い回避する方法を紹介する。

Demo page

	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;
		left:			300px;
		top:			20px;
		text-align:		center;
		border-style:		solid;
		border-width:		2px;
		border-color:		red;
	}
	#shim{
		z-index:		10;
		position:		absolute;
		display:		none;
	}
</style>

	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';
	}

	//idからオブジェクトの取得
	function $(id){
		// IE5+, Mozilla, Opera
		if(document.getElementById) return document.getElementById(id);
		if(document.all) return document.all(id); // IE4
		if(document.layers){ // NN4
			var s='';
			for(var i=1; i<arguments.length; i++)
				s+='document.layers.'+arguments[i]+'.';
			return eval(s+'document.layers.'+id);
		}
		return null;
	}

// --></script>

</head> <body> <iframe scrolling=“no” frameborder=“0” id=“shim”></iframe> <a href=“http://programming-magic.com/”>HOME</a> <a href=“http://programming-magic.com/?id=64”>IE6でselectタグ(プルダウン)がz-indexを無視する対策［CSS, HTML, Tips］</a> <div onmousedown=“dragOn(this, event);” class=“sample” style=“left: 100px; top: 100px;”> マウスでドラッグができます。<br /> width: 300px;<br /> height: 200px;<br /> background-color: #8888ff;<br /> position: absolute;<br /> padding: 10px;<br /> <b>z-index: 100;</b><br /> left: 100px;<br /> top: 100px;<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>