Question

涉及绝对定位的ie7 bug有困难。没有运气就试过几个解决方案。所有的div都应该居中，但正如你在ie7中看到的那样，白盒div向右浮动！

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

Answer 1

我不是100％肯定你的布局方式，但这是我的镜头 - 我基本上只是将“包装器”div移到HTML中的“wrapper-gallery”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>

Answer 2

您在定位div时遇到一些问题。试试这个，看看我把最后三个div移到前两个中。

看看http://jsfiddle.net/TAwz5/

此处修改了模型http://jsfiddle.net/TAwz5/1/

我通常拥有容器中的所有内容，然后我会指定其他div如何在该容器内进行交互。

ie7绝对定位错误

2 个答案: