상위/iframe DTD 정의에 따른 iframe의 랜더링 차이

상위가 표준모드 이고 iframe일 경우 IE9은 쿽스대신 표준모드로 iframe을 랜더링 하는 이슈.
(추가 버그로 iframe내부의 랜더링은 표준 모드로 랜더링 하나 iframe내부에서 a테그 이외에 슈도클래스 사용불가.*상위는 정상 작동)

상위/iframe DTD 정의에 따른 iframe의 랜더링 차이 요약
상위iframeIE9IE8IE7IE6ChromeOperaFF확인용링크
  • IE9이 표준/쿽스 일때 iframe 내부는 표준 렌더링이나 'hover이외의 가상선택자 사용'은 불가(상위는 정상적으로 사용가능) *아래Capture 참조
  • 각 상태는 iframe 내부의 랜더링 결과입니다
  • 상위는 정의된 DTD로 정상 랜더링 됩니다
  • ie9의 결과의 경우 호환성 보기 체크 해제(아이콘 회색)일때 기준입니다
표준쿽스표준쿽스쿽스쿽스쿽스쿽스쿽스링크
표준표준표준표준표준표준표준표준표준링크
쿽스표준표준표준표준표준표준표준표준링크
쿽스쿽스쿽스쿽스쿽스쿽스쿽스쿽스쿽스링크
Rendering Mode에 따른 주요 이슈별 표준 지원 현황(참조문서) S:W3C Standard, N:None Standard
Browser→IE6IE7IE9FFOPSF
Mode→QuirksStandardQuirksStandardQuirksStandardQuirksStandardQuirksStandardQuirksStandard
참조사이트 : 나라디자인
S(*) iframe내부에서는 N
width & padding, border
width값에 padding, border값이 포함되지 않는것이 표준
NSNSNSSSSSSS
margin:0 auto
width값이 적용된 block-lebel 요소는 가운데로 정렬되는 것이 표준
NSNSNSSSSSSS
.test:hover
가상선택자는 모든 선택자(type selector, id selector, class selector)와 조합될 수 있음
NNNSNS(*)NSSSSS

Screen Shot

최상위 표준 / iframe 쿽스

최상위 표준 / iframe 표준

최상위 쿽스 / iframe 표준

최상위 쿽스 / iframe 쿽스