程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了IE6 + IE7 CSS问题与溢出:隐藏;-职位:相对;连击大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决IE6 + IE7 CSS问题与溢出:隐藏;-职位:相对;连击?

开发过程中遇到IE6 + IE7 CSS问题与溢出:隐藏;-职位:相对;连击的问题如何解决?下面主要结合日常开发的经验,给出你关于IE6 + IE7 CSS问题与溢出:隐藏;-职位:相对;连击的解决方法建议,希望对你解决IE6 + IE7 CSS问题与溢出:隐藏;-职位:相对;连击有所启发或帮助;

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

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

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

与:

ul {
    margin-left: -499px;
  }

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

解决方法

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

大佬总结

以上是大佬教程为你收集整理的IE6 + IE7 CSS问题与溢出:隐藏;-职位:相对;连击全部内容,希望文章能够帮你解决IE6 + IE7 CSS问题与溢出:隐藏;-职位:相对;连击所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。