IE9의 고정 헤더 버그?

고정 헤더가있는 웹 사이트를 만들고 있습니다. 다음 코드는 Chrome 및 Firefox에서 제대로 작동하지만 IE9 (및 이전 버전)에서는 .container의 margin-top을 무시하므로 .header (= 페이지 맨 위에 고정되어 있음) 뒤에 표시됩니다. 이상하게도IE9의 고정 헤더 버그?

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
     .header { 
      height: 100px; 
      width: 100%; 
      background: transparent; 
      border: 5px solid green; 
      position: fixed; 
      top: 0; 
      left: 0; 
     } 

     .content { 
      height: 200px; 
      width: 100%; 
      background: orange; 
      margin-top: 110px; /* IE ignores this */ 
     } 
     </style> 
    </head> 
    <body> 
     <div class="header">Header</div> 

     <div class="content">Content.</div> 
    </body> 
<html>

, 내가 헤더와 내용 ...

<body> 
     <div class="content">Content.</div> 

     <div class="header">Header</div> 
    </body>

을 전환하면 ... IE9 올바르게 페이지를 렌더링 (다른 브라우저처럼).

문서의 논리적 순서가 깨질 수 있으므로이 문제를 피하고 싶습니다. 어떤 제안?

출처

2013-06-07 Peter Desmet

여백 대신에 패딩을 사용하십시오. 할 수있을 때 항상 패딩을 사용하십시오. IE는 내 경험으로 마진이 매우 좋지 않습니다. – Pevara

안되요. 내가 IE9에서 테스트 (9.0.8112.1621), 잘 작동 –

의견에 감사드립니다! 이상한, Windows에서 내 IE9 (9.0.8112.16421)에 오류가 발생합니다. 패딩을 사용하여 문제를 해결합니다. –

단순히 float : left; 수업 내용에.

.content {height:200px;width:100%;background:orange;margin-top:110px; 
float:left;}

분명히 그것은 헤더 세트에 charset 선언을주는 것을 잊지 않습니다.

<meta charset='utf-8'>

출처

2013-06-10 11:45:05

IE9의 고정 헤더 버그?

답변

관련 문제