首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >IE6 + IE7 CSS问题溢出:隐藏;-位置:相对;组合

IE6 + IE7 CSS问题溢出:隐藏;-位置:相对;组合
EN

Stack Overflow用户
提问于 2010-03-09 00:55:26
回答 2查看 72.4K关注 0票数 64

所以我已经为主页创建了一个滑块,它使用jQuery滑动一些带有标题和摘要文本的图像。一切正常,我去检查IE,发现IE6和IE7完全杀死了我的滑块css。我不知道为什么,但出于某种原因,我不能隐藏不活动的幻灯片与overflow:隐藏;我试图来回调整css,但没有能够找出是什么导致的问题。

我已经在一个更孤立的html页面中重现了这个问题。

代码语言:javascript
复制
<!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>

我已经追踪到这是

代码语言:javascript
复制
ul {
  position: relative;
}

在导致溢出的ul元素上:隐藏不起作用,但为什么会这样,我不知道。此外,这也需要使用ul上的left属性来滑动滑块javascript。任何关于如何解决这个问题的想法都是非常受欢迎的。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-03-09 17:22:52

此问题显然是IE 6+ 7的a known bug问题,已在IE8中修复。

为了避免这种情况,在这种情况下,您可以替换:

代码语言:javascript
复制
ul {
    left: -499px;
    position: relative;
  }

通过以下方式:

代码语言:javascript
复制
ul {
    margin-left: -499px;
  }

然而,这给我在infobox div上使用的背景带来了一些问题,但没有什么是我不能用一些风格hack解决的。

票数 25
EN

Stack Overflow用户

发布于 2010-04-16 22:28:13

这是IE6和IE7中的一个众所周知的错误。要解决这个问题,您需要添加position:相对于容器。因为在你的例子中,body就是容器,我建议你直接在body下面添加一个div,并赋予它position:relative。它应该能解决你的问题。

票数 182
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2403011

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档