ie7绝对定位bug答案

【问题标题】：ie7 absolute positioning bugie7绝对定位bug
【发布时间】：2011-12-10 16:53:17
【问题描述】：

在涉及绝对定位的 ie7 错误中遇到困难。尝试了一些没有运气的解决方案。所有的 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>

【问题讨论】：

标签： css-position internet-explorer-7

【解决方案1】：

我不是 100% 确定你在布局方面要做什么，但这是我的镜头——我基本上只是将 HTML 中的“wrapper-gallery”div 上方的“wrapper”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>

【讨论】：

【解决方案2】：

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

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

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

我通常将所有东西都放在一个容器中，然后我指定其他 div 在该容器中如何交互。

【讨论】：

谢谢，但不幸的是，我需要将它们分开，因为背景图像很大（不能基于 css），并且顶部的“pagewidth”站点中的 div 带有半透明面板。