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

私は100％あなたがレイアウトに向かっていると確信しているわけではありませんが、ここに私のショットです - 私は基本的にHTMLの "wrapper-gallery" divの上に "wrapper"次にz-indexを微調整しました。あなたがそこに持っていた余分な開始タグも削除しました。お役に立てれば。

<!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

オール・スイッチ・ロロ・トリック！ありがとう！ – hotdiggity