IE6 IE7 + CSS问题溢出：隐藏; - 位置：相对;二合一

StackOverflow https://stackoverflow.com/questions/2403011

题

所以，我已经创建了一个网页的滑块，即用幻灯片使用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;
}

这是造成溢出的UI元素上：隐藏不工作，但是这是为什么，我不知道。另外这是需要做出使用JavaScript工作left属性上的UL到滑动滑块。任何想法，你如何解决这个深受欢迎。

有帮助吗？

解决方案 2

此问题显然是一个已知的错误为IE 6 + 7，其固定在IE8。

要避免这种情况，在这种情况下可以更换：

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

使用：

ul {
    margin-left: -499px;
  }

然而，这给了一些问题，我的信息框格中使用的背景，但没有什么我不能用几个风格黑客解决。

其他提示

有在IE6和IE7公知的错误。为了解决这个问题，你需要添加位置：相对于容器。由于你的情况的身体是容器，我建议你的直属机构加一个div，并给它的位置是：相对的。它应该解决您的问题。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top