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

Posted

技术标签:

【中文标题】IE6 + IE7 CSS 溢出问题:隐藏; - 位置:相对;组合【英文标题】:IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo 【发布时间】:2011-01-25 01:42:44 【问题描述】:

所以我为主页创建了一个滑块,它使用 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 工作以滑动它所必需的。任何关于如何解决此问题的想法都非常受欢迎。

【问题讨论】:

尝试将您的&lt;head&gt; 放在正确的位置... @Jer 显然问题不是我的复制/粘贴缺陷。 【参考方案1】:

这是 IE6 和 IE7 中的一个众所周知的错误。要解决它,您需要添加位置:相对于容器。由于在您的情况下 body 是容器,我建议您直接在 body 下方添加一个 div 并给它位置:relative。它应该可以解决您的问题。

【讨论】:

拯救了我的一天! ...我的意思是晚上) 很好的提示!花了我这么长时间才找到这个帖子!我讨厌 IE! 我通过使用具有绝对位置的内联图像在 IE7 中使用此技术进行 background-size: cover 复制。谢谢!【参考方案2】:

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

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

ul 
    left: -499px;
    position: relative;
  

与:

ul 
    margin-left: -499px;
  

然而,这给我在 infobox div 上使用的背景带来了一些问题,但没有什么是我无法通过一些样式 hack 解决的。

【讨论】:

同样的问题,将position:relative; 设置为ul 父级就可以了。非常感谢!

以上是关于IE6 + IE7 CSS 溢出问题:隐藏; - 位置:相对;组合的主要内容,如果未能解决你的问题,请参考以下文章

选择元素上的 IE6/IE7 CSS 边框

css浏览器兼容问题

怎样隐藏溢出DIV的内容

CSS FF,IE7,IE6的条件CSS

转 CSS hack:针对IE6,IE7,firefox显示不同效果

CSS兼容IE6,IE7,FF的技巧