확대/축소 css 스타일은 절대 절대 div 요소에 적용되지 않으며 IE의 어린이

아래는 테스트 용 html 코드입니다. 다른 브라우저에서는 모든 3-div가 0.5만큼 축소됩니다. 그러나 IE (IE9 포함)에서 절대적으로 위치한 div (두 번째 깊이 div)와 자식 div (세 번째 깊이 div)는 제대로 축소되지 않습니다.확대/축소 css 스타일은 절대 절대 div 요소에 적용되지 않으며 IE의 어린이

모든 div에 대해 줌 스타일을 올바르게 적용하려면 어떻게해야합니까?

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
</head> 
<body style="zoom:0.5"> 
<div style="width:400px;height:400px;background:red"> 
<div style="position:absolute;width:200px;height:200px;background:black"> 
<div style="width:100px;height:100px;background:blue"></div> 
</div> 
</div> 
</body> 
</html>

출처

2013-06-24 장지윤

(당면한 질문은 중요하지 않지만 자료 자체에 대한 이해는이 HTML 또는 XHTML입니까? '' 태그는 XHTML이라고 믿을 수 있지만, ''요소는 두 가지 다른 방법으로 비명을 지릅니다. –

zoom은 비표준 IE 속성입니다. 일부 다른 브라우저 (파이어 폭스와 같은)는 단순히 무시합니다.

표준을 준수하는 요소 크기 조정 방법은 scale()transform-function을 사용하는 것입니다.

body { 
    -webkit-transform: scale(.5); 
    -moz-transform: scale(.5); 
    transform: scale(.5); 
}

는 http://jsfiddle.net/tqMsv/1/ (규모)와 http://jsfiddle.net/tqMsv/ (줌) 부모 요소의 스타일에 "상대적 위치"로 설정

출처

2013-06-24 08:27:39 xec

감사합니다 !! 당신의 힌트는 매우 도움이되었습니다! 자세한 내용은이 링크를 연구하고 발견했습니다. http://stackoverflow.com/questions/3055383/dximagetransform-matrix-absolutely-position-child-elements-not-rotating-in-ie-8/6268206#6268206 –

가 추가되었습니다. 절대 위치 지정된 div 및 progid에 대한 Z- 인덱스 : 이전 IE의 DXImageTransform.Microsoft.Matrix 특성이 정상적으로 작동합니다. ' –

@ 장지윤, 대답으로 표시해야합니다;) – toddmo

비교. 확대 된 상위 요소 내부의 모든 요소가 확대되어야합니다.

출처

2017-06-06 18:29:10

확대/축소 css 스타일은 절대 절대 div 요소에 적용되지 않으며 IE의 어린이

답변

관련 문제