0

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 の小さいバージョンの画像を表示できません。理由は不明です。

4

1 に答える 1