ie7 ошибка абсолютного позиционирования - PullRequest
Новая
       12

ie7 ошибка абсолютного позиционирования

0 голосов
/ 10 декабря 2011

Проблемы с ошибкой 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>

Ответы [ 2 ]

1 голос
/ 10 декабря 2011

Я не уверен на 100%, что вы собираетесь делать с макетом, но вот мой шанс - я просто переместил div "wrapper" над div "wrapper-gallery" в HTML, а затем немного подправил 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>
0 голосов
/ 10 декабря 2011

У вас есть некоторые проблемы с позиционированием ваших дивов.Попробуйте это и посмотрите, что я переместил последние три элемента, которые должны содержаться в верхних двух.

посмотрите здесь http://jsfiddle.net/TAwz5/

Пересмотренная модель здесь http://jsfiddle.net/TAwz5/1/

Iобычно все внутри контейнера, а затем я уточняю, как другие div взаимодействуют в этом контейнере.

...