CSS

IE6 + IE7 CSS问题，溢出：隐藏；-职位：相对；连击

发布于 2021-02-02 16:47:14

因此，我为主页创建了一个滑块，该滑块使用jQuery滑动了一些带有标题和预告文本的图像。一切正常，我去检查IE，发现IE 6和IE
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工作。关于如何解决此问题的任何想法都非常欢迎。

关注者
0
被浏览
91
举报
1 个回答
  • 面试哥
    面试哥 2021-02-02
    为面试而生，有面试问题，就找面试哥。

    这个问题显然是IE 6 + 7 的已知错误，已在IE8中修复。

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

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

    与：

    ul {
    margin-left: -499px;
  }

    但是，这给我在infobox div上使用的背景带来了一些问题，但是对于一些样式技巧我无法解决。



推荐阅读
知识点
面圈网VIP题库

面圈网VIP题库全新上线，海量真题题库资源。 90大类考试，超10万份考试真题开放下载啦

去下载看看