Firefox バージョン 22 (2 つの異なる img タグ) で写真を正常に表示しています。img タグの 1 つは CSS の幅または高さが設定されていないため、画像は元のサイズで表示されます。
2 番目の img タグは、CSS スタイルによって 60px x 60px に設定されています。
これら 2 つの img タグの「innerHTML」を設定すると、Firefox で元のサイズの画像が表示され、同じ画像が 60px x 60px の img タグに収まるように縮小されます。
IE バージョン 10.0.9 では、CSS を介して 60px x 60px に設定されている 2 番目の img tax に何も表示されません。
実行中のコードとまったく同じです。ここのコードに存在しない 60px x 60px の img タグに IE が画像を表示するために必要なことはありますか?
ところで、以下のコードは PHP ファイルで生成されます。「非表示の Iframe」アプローチを使用して、画像を読み込み、Web ページに表示します。以下のコードは PHP ファイルで生成され、以下に表示されるものを出力します。私のhtmlページの非表示のiframeに、iframeの親ドキュメントを取得するコードがここに表示されるのはそのためです:
<script language="JavaScript" type="text/javascript">
var parDoc = parent.document;
parDoc.getElementById('justOpenedImage').innerHTML =
'<div><img src=\'http://localhost/thesite/aPhoto.jpg\' /></div>';
parDoc.getElementById('60by60').innerHTML =
'<div><img class="60by60Image" src=\'http://localhost/thesite/aPhoto.jpg\' /></div>';
</script>
CSS クラス 60by60Image は次のとおりです。
.60by60Image
{
border: 2px solid green;
width: 60px;
height: 60px;
display: inline-block;
}
ページの html は次のとおりです。
<!-- THE ORIGINAL-SIZED IMAGE APPEARS FINE HERE IN BOTH IE AND FF -->
<div id="justOpenedImage"></div>
<!-- THE SMALLER IMAGE APPEARS HERE IN FIREFOX BUT NOT IN IE -->
<div>
<img class="60by60Image" id="60by60" src="" />
</div>
これは Firefox では正常に機能していますが、IE では 60 x 60 の小さいバージョンの画像を表示できません。理由は不明です。