IE6 + IE7 проблема CSS с переполнением: скрытый; - позиция: относительная; комбо

Итак, я создал слайдер для домашней страницы, который слайд некоторых изображений с заголовком и текстом тизера, используя 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, чтобы сместить его. Любые идеи относительно того, как вы можете исправить это, очень приветствуются.

Ответ 1

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

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

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

с:

ul {
    margin-left: -499px;
  }

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

Ответ 2

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