IE6 + IE7 CSS проблема с переполнением: скрыто; - положение: относительное; комбо - PullRequest
64 голосов
/ 08 марта 2010

Итак, я создал слайдер для домашней страницы, который слайдирует некоторые изображения с заголовком и текстом тизера с помощью jQuery. Все работает отлично, и я пошел проверить IE и обнаружил, что IE 6 и 7 полностью убивают мой ползунок css. Я не могу понять, почему, но по какой-то причине я не могу скрыть неактивные слайды с переполнением: hidden; Я пытался настроить CSS вперед и назад, но не смог выяснить, что является причиной проблемы.

Я воссоздал проблему на более изолированной HTML-странице.

<!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" xml:lang="da" lang="da" dir="ltr">
  <head>
    <style>
      body {
       width: 900px;
      }
      .column-1 {
        width: 500px;
        float: left;
      }
      .column-2 {
        width: 200px;
        float: left;
      }
      .column-3 {
        width: 200px;
        float: left;
      } 
      ul {
        width: 2000px;
        left: -499px;
        position: relative;
      }

      li {
        list-style: none;
        display: block;
        float: left;
      }

      .item-list {
        overflow: hidden;
        width: 499px;
      }
    </style>
  </head>
  <body>
    <div class="column-1">
      <div class="item-list clearfix">
        <ul>
          <li class="first">
            <div class="node-slide">
              <img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
              <div class="infobox">
                <h4>Title 1</h4>
                <p>Teaser 1</p>
              </div>
            </div>
          </li>
          <li>
            <div class="slide">
              <img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
              <div class="infobox">
                <h4>Title 2</h4>
                <p>Teaser 2</p>
              </div>
            </div>
          </li>
          <li class="last">
            <div class="slide">
              <img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
              <div class="infobox">
                <h4>Title 3</h4>
                <p>Teaser 3</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="column-2">
      ...
    </div>
    <div class="column-3">
      ...
    </div>
  </body>
</html>

Я обнаружил, что это

ul {
  position: relative;
}

на элементе ul, который вызывает переполнение: скрытый, чтобы не работать, но почему, я не знаю. Также это необходимо для того, чтобы заставить javascript слайдера работать, используя левый атрибут ul для его перемещения. Любые идеи относительно того, как вы можете это исправить, приветствуются.

Ответы [ 2 ]

182 голосов
/ 16 апреля 2010

Это известная ошибка в IE6 и IE7. Чтобы решить ее, вам нужно добавить положение: относительно контейнера. Поскольку в вашем случае тело является контейнером, я бы посоветовал вам добавить div непосредственно под телом и указать его положение: относительный Это должно решить вашу проблему.

25 голосов
/ 09 марта 2010

Эта проблема, по-видимому, известная ошибка для IE 6 + 7, которая была исправлена ​​в IE8.

Чтобы избежать этого, в этом случае вы можете заменить:

ul {
    left: -499px;
    position: relative;
  }

с:

ul {
    margin-left: -499px;
  }

Это, однако, вызвало некоторые проблемы с фоном, который я использовал в div infobox, но ничего, что я не смог решить с помощью нескольких стилей хаков.

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