Почему моя отрицательная маржа не работает в IE7? - PullRequest
Новая
       36

Почему моя отрицательная маржа не работает в IE7?

2 голосов
/ 17 декабря 2010

У меня есть два сложенных блока, где я хочу, чтобы содержимое из верхнего блока перетекло в нижний блок. Используя отрицательное нижнее поле для оболочки содержимого, я смог добиться этого во всех браузерах, кроме IE 7, где вместо того, чтобы проходить через нижний div, контент обрезается / перекрывается им.

Я ищу объяснение того, что именно здесь происходит, и возможные исправления.

Полный пример HTML: 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Negative Margin Test</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">

<style type="text/css">

.container {
 width: 800px;
 background: none;
 position:relative; 
}
.container-mid{
 background:#F00;/**/
 border:dashed thick #090;
 width:100%;
}
.container-bottom{
 background:#FF0;/**/
 border:dashed thick #090;
 width:100%;
 height: 200px;
}
.container-inner{
 width:100%;
 margin:0 auto;
 margin-bottom:-200px;/**/

}

</style>

</head>

<body>

<div class="container">


    <div class="container-mid">

        <div class="container-inner">

            <div class="content">       

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet bibendum tortor. Etiam at diam vitae mauris venenatis varius. Nam nec mauris ut ligula dictum fringilla a accumsan diam. Fusce ac mauris in lacus venenatis bibendum non eget nisl. In quis pretium dolor. In hac habitasse platea dictumst. Nam at quam et velit faucibus cursus. Aenean ut augue id augue suscipit condimentum sed eu est. Pellentesque commodo ipsum nec ligula aliquet a lobortis augue pharetra. Curabitur pretium luctus posuere. Proin id nisi sed lectus commodo porta. Fusce leo augue, lacinia eu tincidunt sed, faucibus at turpis. Aenean ut mi nulla. Duis orci urna, euismod quis mollis interdum, pharetra quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi gravida eleifend ante ac hendrerit. Nunc ultricies tellus mauris.</p>
                <br />
                <br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet bibendum tortor. Etiam at diam vitae mauris venenatis varius. Nam nec mauris ut ligula dictum fringilla a accumsan diam. Fusce ac mauris in lacus venenatis bibendum non eget nisl. In quis pretium dolor. In hac habitasse platea dictumst. Nam at quam et velit faucibus cursus. Aenean ut augue id augue suscipit condimentum sed eu est. Pellentesque commodo ipsum nec ligula aliquet a lobortis augue pharetra. Curabitur pretium luctus posuere. Proin id nisi sed lectus commodo porta. Fusce leo augue, lacinia eu tincidunt sed, faucibus at turpis. Aenean ut mi nulla. Duis orci urna, euismod quis mollis interdum, pharetra quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi gravida eleifend ante ac hendrerit. Nunc ultricies tellus mauris.</p>
                <br />
                <br />
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sit amet bibendum tortor. Etiam at diam vitae mauris venenatis varius. Nam nec mauris ut ligula dictum fringilla a accumsan diam. Fusce ac mauris in lacus venenatis bibendum non eget nisl. In quis pretium dolor. In hac habitasse platea dictumst. Nam at quam et velit faucibus cursus. Aenean ut augue id augue suscipit condimentum sed eu est. Pellentesque commodo ipsum nec ligula aliquet a lobortis augue pharetra. Curabitur pretium luctus posuere. Proin id nisi sed lectus commodo porta. Fusce leo augue, lacinia eu tincidunt sed, faucibus at turpis. Aenean ut mi nulla. Duis orci urna, euismod quis mollis interdum, pharetra quis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi gravida eleifend ante ac hendrerit. Nunc ultricies tellus mauris.</p>

            </div><!-- end .content -->

        </div><!-- end .container-inner -->

    </div><!-- end .container-mid -->

    <div class="container-bottom"></div>

  <!-- end .container --></div>


</body>
</html>

В IE8: (результаты такие же, как в Chrome / FFox / и т. Д.) alt text

В IE 7: (протестировано с IE8-> Инструменты разработчика-> Режим IE7) alt text

Как видите, переполненный контент перекрывается желтым делителем.

Смотрите мой живой пример

Ответы [ 3 ]

2 голосов
/ 20 декабря 2010

Попробуйте установить position:relative; на .container-inner, чтобы он явно имел более высокий порядок суммирования, который должен разместить его выше. 

.container-inner { position:relative; }

Я задокументировал эту ошибку здесь .

0 голосов
/ 20 декабря 2010

Другой подход заключается в использовании только одного div.Установите желтый фон с фоном повторения x красного цвета, который имеет высоту 200px 

.container {
    background: url('red_back.png') repeat-x 0 0 yellow;
    }
0 голосов
/ 20 декабря 2010

Вам, вероятно, придется явно установить свойство CSS overflow. IE 7 имеет ряд значений по умолчанию, которые отличаются от большинства браузеров. Смотри: http://www.w3schools.com/css/pr_pos_overflow.asp

Попытка: 

.container-inner{
    width:100%;
    margin:0 auto;
    margin-bottom:-200px;/**/
    overflow: visible;/**/
}
...