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

divの配置にはいくつかの問題があります。これを試して、最後の3つの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絶対配置のバグ

答えて

関連する問題