작은 <img>은 Firefox v22.0에서 작동하지만 IE v10.0.9에서는 작동하지 않습니다.

Question

두 가지 다른 img 태그에서 사진을 성공적으로 표시합니다. img 태그 중 하나에 CSS 너비 또는 높이가 없습니다. 설정하면 이미지가 원래 크기로 나타납니다.

두 번째 img 태그는 CSS 스타일에 의해 60x60 픽셀로 설정됩니다.

이 두 img 태그 중 'innerHTML'을 설정하면 Firefox에서 원본 크기 이미지와 동일한 이미지가 60px x 60g 크기의 img 태그에 맞게 축소됩니다.

IE 버전 10.0.9에서는 CSS를 통해 60px로 60px로 설정된 두 번째 img 세금이 표시되지 않습니다.

정확히 동일한 코드입니다. IE에서 60px x 60px img 태그의 이미지를 표시하려면 여기에 코드가 없습니다.

덧붙여서 아래의 코드는 PHP 파일에서 생성됩니다 - '숨겨진 Iframe'접근 방식을 사용하여 웹 페이지에 이미지를 표시 한 다음 아래 코드가 PHP 파일에 생성 된 다음 출력됩니다 당신이 당신이 여기 코드가 iframe을의 부모 문서 점점 참조 왜 내 HTML 페이지에 내 숨겨진 iframe을에 아래 참조 :

.60by60Image 
{ 
    border: 2px solid green; 
    width: 60px; 
    height: 60px; 
    display: inline-block; 
} 

: 여기

<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입니다 페이지의 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에서는 60x60 크기의 작은 이미지가 표시되지 않습니다. 그 이유는 확실하지 않습니다.

Answer 1

이미지의 innerHTML을 설정합니다. 스크립트의 실행 후, 문서 트리가 다음과 같은 :

<div> 
    <img class="60by60Image" id="60by60" src=""> 
     <div><img class="60by60Image" src='http://localhost/thesite/aPhoto.jpg' /></div> 
    </img> 
</div> 

내가 IE 그냥하지 않는 '핸들'이 생각합니다. 적어도 유효한 HTML은 아닙니다.

id="60by60" 속성을 상위 div에 추가하여이를 수정할 수 있으며이를 img에서 제거 할 수 있습니다. javascript는 이미지 대신 div의 innerHTML을 변경합니다.

<div id="60by60"> 
    <img class="60by60Image" src=""> 
</div> 

또는 이미지의 src 특성을 변경하십시오.

parDoc.getElementById('60by60').src = 'http://localhost/thesite/aPhoto.jpg';