Question

所以我为主页创建了一个滑块，使用jQuery滑动一些带有标题和传情文本的图像。一切正常，我去检查IE，发现IE 6和7完全杀死我的滑块css。我无法弄清楚为什么，但由于某种原因我无法隐藏溢出的非活动幻灯片：隐藏;我曾经尝试过来回调整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元素：隐藏不起作用，但为什么会这样，我不知道。此外，还需要使用ul上的left属性使滑块javascript工作以滑动它。关于如何解决这个问题的任何想法都是最受欢迎的。

Answer 1

这是IE6和IE7中众所周知的错误。要解决它，您需要添加位置：相对于容器。因为在你的情况下，身体是容器，我建议你直接在身体下面添加一个div并给它位置：relative。它应该可以解决你的问题。

Answer 2

对于IE 6 + 7，这个问题显然是a known bug，已在IE8中得到修复。

为避免这种情况，在这种情况下，您可以替换：

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

使用：

ul {
    margin-left: -499px;
  }

然而，这给我在信息框div上使用的背景带来了一些问题，但是没有什么我用一些风格黑客无法解决。

IE6 + IE7带溢出的CSS问题：隐藏; - 职位：亲属;二合一

2 个答案: