IE6 + IE7 CSS problem z przepełnieniem: hidden; - position: relative; combo

Więc stworzyłem suwak dla strony głównej, który wyświetla niektóre obrazy z tytułem i tekstem teasera za pomocą jQuery. Wszystko działa dobrze, i poszedłem sprawdzić IE i okazało się, że IE 6 i 7 zabija mój suwak css całkowicie. Nie mogę zrozumieć dlaczego, ale z jakiegoś powodu nie mogę ukryć nieaktywnych slajdów za pomocą overflow: hidden; próbowałem poprawić css tam iz powrotem, ale nie byłem w stanie dowiedzieć się, co powoduje problem.

Odtworzyłem problem w bardziej odizolowanym html strona.

<!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>

Wyśledziłem, że to jest 

ul {
  position: relative;
}

Na elemencie ul, który powoduje przepełnienie: hidden nie działa, ale dlaczego tak jest, Nie wiem. Jest to również potrzebne, aby suwak javascript działa za pomocą lewego atrybutu na ul, aby go przesuwać. Wszelkie pomysły, jak można to naprawić, są mile widziane.

Author: googletorp, 2010-03-08
Source

2 answers

Jest to dobrze znany błąd w IE6 i IE7. Aby go rozwiązać, musisz dodać pozycję: względem kontenera. Ponieważ w Twoim przypadku body jest kontenerem, sugerowałbym dodanie div bezpośrednio pod ciałem i nadanie mu pozycji: relative. To powinno rozwiązać twój problem.

 182
Author: Niels,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-04-16 14:28:12

Ten problem jest najwyraźniej znany błąd dla IE 6 + 7, który został naprawiony w IE8.

Aby tego uniknąć, w tym przypadku można zastąpić: 

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

Z: 

ul {
    margin-left: -499px;
  }

To jednak dało pewne problemy z tłem, którego użyłem w infoboksie div, ale nic, czego nie mogłem rozwiązać za pomocą kilku hacków stylowych.

 25
Author: googletorp,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-03-09 09:22:51