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

поэтому я создал слайдер для домашней страницы, который скользит по некоторым изображениям с заголовком и текстом тизера с помощью jQuery. Все работает нормально, и я пошел проверить IE и обнаружил, что IE 6 и 7 полностью убивает мой слайдер css. Я не могу понять, почему, но по какой-то причине я не могу скрыть неактивные слайды с overflow: 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 64
html css overflow internet-explorer-7 internet-explorer-6

2 ответа:

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

182

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

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

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

С:

ul {
    margin-left: -499px;
  }

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

25