Internet Explorer 10에서 이미지의 너비와 높이를 무시합니다.

Question

Internet Explorer 10에서 명시 적으로 설정된 너비 및 높이 특성을 실제 이미지 크기보다 크게 무시한 웹 사이트가 있습니다.

화상은 다음과 같이 정의된다 :

<img style="float: left; margin: 0px 10px 0px 0px; display: inline;" 
    align="left" src="http://blog.hinshelwood.com/files/2012/09/metro-findings.png" 
    width="64" 
    height="64"/> 

있지만 IE10에서 128 * 128으로 표현된다. Chrome에서는 예상대로 작동합니다.

예. http://blog.hinshelwood.com/tfs-integration-tools-issue-tfs-wit-invalid-submission-conflict-type/

이 페이지에서 "적용 대상", "솔루션"및 "결과"이미지는 모두 64x64로 설정되지만 IE10에서는 128x128로 표시됩니다. 다음 CSS 설정을 시도했지만이 역시 무시됩니다.

h3 img { 
width: 64px; 
height: 64px; 
} 

이유가있는 사람이 있습니까?

Answer 1

당신은

body .content img { 
    max-width: 100%; 
    height: auto; 
    width: auto \9; 
} 

http://blog.hinshelwood.com/wp-content/themes/pagelines/pagelines-compiled-css-2_1348178943/

가 IE에서 잘못된 width: auto \9;가 크롬에서 width: auto;

로 해석해야, 잘못된 폭은 무시됩니다.

너비 자동없이, 화상의 움직임은 다르다 :

크롬

는 폭 해주기 h3 IMG { width: 64px; }로부터 유도되고, 높이가 자동으로되기 때문에, 화상 64px에 따라 스케일링된다.

IE에서는 너비와 높이가 모두 "자동"이므로 기본 IMG 크기를 사용합니다.

CSS 스타일이 IMG 태그 속성보다 우선합니다. : 인라인 스타일을 사용하여 상속 된 스타일을 재정의 할 수 있습니다.

<img style="height: 64px; width: 64px;" src="..." />