複数行select要素が1行表示になる

sizeで複数行を指定したselectタグの表示で問題があったという
javascriptのクロスブラウザ（糞IE6用）ネタです。

普通にセレクトボックスをbodyに追加している例ですが

var select = document.createElement("select");
select.size = 5;
document.body.appendChild(select);

これは問題ありません。

一方これは

var select = document.createElement("select");
select.size = 5;
select.style.display = "none";
document.body.appendChild(select);
// id="hoge_trigger"の要素のonclickにイベントを追加
document.getElementById("hoge_trigger").onclick = function(){
select.style.display = "inline";
};

onclickイベントを呼べば複数行selectボックスが表示されるはずの例ですが
IE6だとsize=1のselectボックスになってしまう。（FireFoxはOK）

対策は

document.getElementById("hoge_trigger").onclick = function(){
select.style.visibility = "hidden";
select.style.display = "inline";
// 時間差を入れて可視にしてみる
setTimeout(function(){
select.style.visibility = "visible";
}, 100);
};

これで期待通りに表示されます。
描画が間に合わない？ような感じ。

知らねーよ、マジで。
3hハマり