Internet Explorer에서 최대 높이가 작동하지 않습니다.

max-height: 100%을 IE 10 (Internet Explorer 9)에서 작동시키는 데 문제가 있습니다.Internet Explorer에서 최대 높이가 작동하지 않습니다.

여기 StackOverflow에서 몇 가지 질문을 발견했지만 그 중 아무 것도 내 사례에 적용되지 않습니다. (많은 것은 고정 크기의 래퍼를 다루고있다.)

나는 dinamically 모달의 이미지를 보여주고있다.
오버플로 가능한 창 영역을 사용하지 않기 위해 최대 크기를 제한하려고합니다.
따라서 작은 이미지를 늘리 길 원치 않기 때문에 height: xxxpx이 없습니다.
래퍼 div를 height: 100%으로 설정하지 않기 때문에 이미지 크기가 조정되기를 원합니다.

는 여기에 문제의 작은 demostration입니다 :

<!DOCTYPE html> 
... 
<div id="thumbnail-container"> 
    <img src="http://www.universetoday.com/wp-content/uploads/2008/09/sun_stereo_4dec2006_lrg.jpg"/> 
</div>

CSS 그것은 크롬에서 작동

#thumbnail-container img { 
    max-height: 100%; 
}

Demo in fiddle

하지만 IE에서 작동하지 않습니다. max-width이 정상적으로 작동합니다.

Javascript를 사용하지 않고 어떻게이 작업을 수행 할 수 있습니까?

출처

2014-04-09 Andre Figueiredo

IE8에서 JSFiddle을 올바르게 볼 수없는 경우 : \ – MJoraid

-1

max-height 속성은 IE7 +에서 작동하지만 페이지에 표준 DOCTYPE이있는 경우에만 작동합니다. 문서의 DOCTYPE을 선언 해보십시오. 다음 중 하나를 시도해보십시오

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<!DOCTYPE html>

또한, IE 호환 모드에있는 경우, 그 문제가 발생할 수 있습니다. 당신의 문서 <head>에 다음을 추가하십시오 : 백분율 사용 min-height 및 max-height 같은

<!-- Forces user OUT of IE's compatibility mode and removes "broken page" icon --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

출처

2014-04-09 14:53:16

''을 사용하고 있습니다. –

속성, 부모 컨테이너의 비율로 그 비율 을 적용하고 있습니다. 지금 당장 부모 컨테이너가 없으므로 문제가됩니다.

또한 부모 컨테이너의 높이가 명시 적 값으로 설정되지 않은 경우 max-height을 백분율로 사용하면 마찬가지로 작동하지 않습니다.

그래서, 어딘가 max-height: 100%;를 사용하여, 당신은 또한 그 요소의 부모 컨테이너의 높이가 명시 적 값으로 설정해야합니다 (즉, 50px 50 %가 명시 적으로하지 않기 때문에, 작동하지 않습니다 50%로 설정 부모를 갖는. 그것은 상대의) .

출처

2014-04-09 14:53:22 TylerH

그래서 불행히도 내 대안은 자바 스크립트에 있습니까? –

@ AndréFigueiredo 부모 컨테이너에서 높이를 설정하고 싶지 않으면 그럴 수도 있습니다. – TylerH

Internet Explorer에서 최대 높이가 작동하지 않습니다.

답변

관련 문제