document.createElement img - ma-100140 @ ウィキ

document.createElement imgでのIE6.0の困った挙動

var img = document.createElement('img');
img.src = xxxxxxx.gif;
img.style.border = "none"; 
img_link.appendChild(img);

とやって、JavaScriptで画像ファイルを取り込んでいます。

Firefox3.01、safari3.2.2では画像はきちんと表示されます。ただIE6.0の場合だけ画像が縮小されて表示されてしまいます。どうもIE6.0は勝手にwidth、height属性を設定するため、本来の画像サイズと異なる表示がされ、画像が縮小されます。

この勝手な振る舞いを制止させるために、先ほどのプログラムを変更

var img = document.createElement('img');
img.src = xxxxxxx.gif;
img.style.border = "none";
img.removeAttribute('width');
img.removeAttribute('height');
img_link.appendChild(img);

というように、勝手に属性を作成しても、強制的に削除します。

これでおもったように画像が表示されました。

ブラウザ	結果
IE6.0 SP3	○
IE6.0 SP2	×
IE6.0 SP1	○
Firefox 3.01	○
safari 3.2.2	○

同じ画像をそれぞれのブラウザで表示して気付きましたが、safariが一番画像がきれい。