ie7 절대 위치 지정 버그

절대 위치 지정과 관련된 ie7 버그에 어려움이 있습니다. 운없이 몇 가지 해결책을 시도해보십시오. 모든 div는 가운데에 맞춰야하지만 ie7에서 볼 수 있듯이 흰색 상자 div는 오른쪽으로 떠 있습니다!ie7 절대 위치 지정 버그

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"><html> 
    <head> 
     <title></title> 
     <style> 
    html, body { text-align: center; width: 100%; background-color: #3E5269; } 
    .wrapper-gallery { position: relative; margin-left: auto; margin-right: auto; width: 1600px; overflow: hidden; top: 0px; left: 0px; min-height:1000px; height:auto !important; height:1000px; } 
    .wrapper-gallery img { width: 1600px; height: 1000px; } 
    .wrapper-gradient { background-image: url(images/bgd_gradient.png); background-repeat: repeat-x; background-position: left bottom; max-width: 1600px; width: 1600px; min-width: 1600px; height: 250px; position: absolute; height:250px; position:absolute; bottom:0px; left:0px; z-index: 999; } 
    .wrapper { position: absolute; top: 0; width: 100%; /*visibility: hidden;*/zoom:1;} 
    #pagewidth { width: 960px; margin: 0 auto; text-align: left; position: relative; zoom:1;} 
    #header { width: 100%; height: 138px; position: relative;zoom:1; } 

    .wrapper, #pagewidth { border: 1px solid #fff;} 
    .wrapper-gradient, .wrapper-gallery { border: 1px solid #000;} 
     </style> 
    </head> 
    <body> 
     <div class="wrapper-gallery">wrapper-gallery 
     <div class="wrapper-gradient">wrapper-gradient</div> 
     </div> 
    <!-- end .wrapper-gallery --> 
     <div class="wrapper">wrapper 
     <div id="pagewidth">pagewidth 
     <div id="header">header 
     </div> 
     </div> 
     </div> 
     </body> 
    </html>

출처

2011-12-10 hotdiggity

레이아웃과 관련하여 어떤 작업을하는지 확신 할 수는 없지만 기본적으로 HTML의 "래퍼 갤러리"div 위의 "래퍼"div를 이동했습니다. 그런 다음 z- 인덱스를 약간 조정했습니다. 거기에있는 불필요한 여는 태그도 제거했습니다. 희망이 도움이됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title></title> 
    <style> 
     html, body 
     { 
      text-align: center; 
      width: 100%; 
      background-color: #3E5269; 
     } 
     .wrapper-gallery 
     { 
      position: relative; 
      margin-left: auto; 
      margin-right: auto; 
      width: 1600px; 
      overflow: hidden; 
      top: 0px; 
      left: 0px; 
      min-height:1000px; 
      height:auto !important; 
      height:1000px; 
      z-index: 0; 
     } 
     .wrapper-gallery img 
     { 
      width: 1600px; 
      height: 1000px; 
     } 
     .wrapper-gradient 
     { 
      background-image: url(images/bgd_gradient.png); 
      background-repeat: repeat-x; 
      background-position: left bottom; 
      max-width: 1600px; 
      width: 1600px; 
      min-width: 1600px; 
      height: 250px; 
      position: absolute; 
      bottom:0px; 
      left:0px; 
      z-index: 1; 
     } 
     .wrapper 
     { 
      position: absolute; 
      top: 0; 
      width: 100%; 
      /*visibility: hidden;*/ 
      zoom:1; 
      z-index: 2; 
     } 
     #pagewidth 
     { 
      width: 960px; 
      margin: 0 auto; 
      text-align: left; 
      position: relative; 
      zoom:1; 
     } 
     #header 
     { 
      width: 100%; 
      height: 138px; 
      position: relative; 
      zoom:1; 
     } 

     .wrapper, #pagewidth { border: 1px solid #fff;} 
     .wrapper-gradient, .wrapper-gallery { border: 1px solid #000;} 
    </style> 
    </head> 
    <body> 
     <div class="wrapper">wrapper 
      <div id="pagewidth">pagewidth 
       <div id="header">header 
       </div> 
      </div> 
     </div> 
     <div class="wrapper-gallery">wrapper-gallery 
      <div class="wrapper-gradient">wrapper-gradient</div> 
     </div> 
     <!-- end .wrapper-gallery --> 
    </body> 
    </html>

출처

2011-12-10 08:45:13

ol 'switch-a-roo 트릭! 감사! – hotdiggity

div를 배치 할 때 몇 가지 문제가 있습니다. 이것을 시도하고 마지막 세 div가 상위 2 개 안에 포함되도록 이동했는지 확인하십시오.

여기 http://jsfiddle.net/TAwz5/1/

나는 일반적으로 컨테이너 내의 모든 것을 가지고 다른 div를 그 컨테이너 내에서 상호 작용하는 방법을 다음 내가 specity 이쪽을 봐 http://jsfiddle.net/TAwz5/

개정 된 모델을 가지고있다.

출처

2011-12-10 07:58:22 webb

덕분에,하지만 불행히도 나는 큰 배경 이미지 (CSS 기반이 될 수 없습니다), 및 반투명 패널 맨 위에 "페이지 폭"사이트 내에서 div의 거기로 별도 보관해야합니다. – hotdiggity

감사합니다 - 잘 작동합니다. – hotdiggity

ie7 절대 위치 지정 버그

답변

관련 문제