zoukankan      html  css  js  c++  java
  • <转>IE常见的BUG及解决方法

    1. IE6浮动元素双倍外边距BUG
      发生条件:当一个子元素的浮动方向和它的外边距方向一致时,它与父元素的边距将变成两倍。
      1
      2
      3
      4
      5
      6
      7
      8
      <!-- 示例代码 -->
      <style type="text/css">
          #box2 { float:left; margin-left:50px;}
      </style>
       
      <div id="box1">
          <div id="box2"></div>
      </div>

      解决方法:对子元素(BOX2)使用display:inline; 或者尽可能的避免使用相同方向的外边距。

    2. IE6三像素偏移BUG
      发生条件:当两个元素并排,一个元素使用浮动定位,相邻它的元素的内部文本开头会产生3像素的偏移;如果给这个包含文本的元素设定高度时,文本上的3像素偏移将转移至这两个元素之间。
      1
      2
      3
      4
      5
      6
      7
      <style type="text/css">
          #box1 { 100px; height:100px; float:left; background-color:red;}
          #box2 { /* 如果设定BOX2的高度,文本的3像素偏移会转移到这两个元素之间 */ }
      </style>
       
      <div id="box1"></div>
      <div id="box2">BOX2中的文本内容</div>

      解决方法:对浮动元素使用负的3像素外边距来弥补空隙:#box1 { margin-right: -3px; } ,或者对另外个元素也使用浮动布局。

    3. IE6绝对定位BUG
      经过各种测试发现这个BUG极其诡异、多变:
      当父元素没有设定宽高、zoom:1、height1%时,绝对定位的子元素的left会根据父元素的padding进行定位,right、top、bottom简直乱七八糟,还会因为父元素的margin和padding影响,会发生诡异的变化。
      当父元素使用zoom:1或者height:1%时,绝对 定位的子元素 top、left正常,right、bottom会+1个像素(比如right:50px; bottom:-50px; 会变成right:51px; bottom:-49px;)。
      如果只设定宽度,left、top、right正常,bottom会+1。
      如果只设定高度,其他方向正常,right会+1。
      如果宽和高都有设定,则全部正常。
      但是实际应用中,大多时候都希望由内容撑开容器,所以为了hack而专门设定宽高不切实际。
      如果只是左上定位,或者右下的定位不需要那么精确,可以给父元素加上zoom:1或height:1%,如果需要全方位的精确定位,父元素又不能定死宽 高,那就只好使用下划线(像这样 _right { … })来对IE6产生的偏移进行修正,偏移多少修正多少。但是偏移多少呢,懒得量,太麻烦,怎么办?
      老苏我建议的是先给父元素增加zoom:1,如果设定宽度,那就只对bottom进行1像素修正;如果只设定了高度,就修正right 1像素;这样的好处就是,我们始终知道 他们在left和right上只偏移了1像素;
    4. IE6/7躲猫猫(peekaboo)bug
      发生条件:一个浮动元素后面跟着一个非浮动元素,接着是一个清理浮动的元素,所有元素都包含在一个有背景色或背景图片的父元素中。
      1
      2
      3
      4
      5
      HTML 代码:
      <div class="father">
         <div class="float">浮动元素中的内容</div><div>这里是非浮动元素中的内容</div>
         <div class="clear"></div>
      </div>
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      CSS 代码:
      .father{
       background:skyBlue;
      }
      .float{
       float:left;
       border:3px solid red;
      }
      .clear{
       clear:both;
       border:3px solid blue;
      }

      解决办法1:去掉父元素的背景颜色或图片(一般来说这个方法适用范围太小)。
      解决方法2:避免清理元素和浮动元素相接触(非浮动元素用高度撑开,使浮动元素与清浮动元素不接触,同样的,这方法不咋地)。
      解决方法3:给容器指定一个行高。
      解决方法4:将浮动元素和容器元素的position属性设置为relative。
      以上四种方法老苏认为在实际网站建设当中,都会或多或少遇到限制性因素,到最后也是徒增烦恼。
      我认为解决这个BUG的着手点应该是寻找一个清浮动的替代方案。
      请使用:clearfix

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      .clearfix:after {
          content:".";
          display:block;
          clear:both;
          visibility:hidden;
          font-size:0;
          line-height:0;
          height:0;
      }
      .clearfix {
          *zoom:1; /* 针对IE6 7 */
      }

      然后将这个类名赋予.father元素,这时,你完全可以把无意义的clear元素删除了。
      这个方法不仅解决了BUG,还让html代码变得简洁。

    5. IE6内容无法滚动BUG
      发生条件:一个相对定位的父元素,并且没有指定尺寸,它内部包含一个绝对定位元素,当这个绝对定位元素高度超过浏览器视口高度时,IE6下不会出现滚动条。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <style type="text/css">
      #box {
        border:1px solid red;
        position:relative;
      }
      #box1 {
        background-color:gray;
        position:absolute;
        100%;
        height:2000px;
      }
      </style>
       
      <div id="box">
           <div id="box1"></div>
      </div>

      解决方法很简单,给父元素加上如下代码:
      height:1%;
      或者
      zoom:1;

    6.  IE6中 长串的英文字符不换行导致布局被撑破
      为IE6增加以下以下代码强制断字换行:
      _word-wrap:break-word;  /* For IE6 */
    7. IE6复合选择器
      这其实不算是个BUG,不过还是记录一下吧。
      IE6复合选择器仅支持:tag#ID或者tag.class,前面必须是标签名,如果这样写:.class.class或者#id.class等连写方式,IE6只识别后面的选择器;
    8. IE6中 position:fixed 无效的解决方法
      让position:fixed在IE6下可用!
      /* 下面的是除了IE6的主流浏览器通用的方法 */

      .fixed-top /* 头部固定 */{position:fixed;bottom:auto;top:0px;}
      .fixed-bottom /* 底部固定 */{position:fixed;bottom:0px;top:auto;}
      .fixed-left /* 左侧固定 */{position:fixed;right:auto;left:0px;}
      .fixed-right /* 右侧固定 */{position:fixed;right:0px;left:auto;}/* 下面的是IE6的方法 */
      * html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
      * html .fixed-top /* IE6 头部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
      * html .fixed-right /* IE6 右侧固定 */ {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
      * html .fixed-bottom /* IE6 底部固定 */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
      * html .fixed-left /* IE6 左侧固定 */{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
  • 相关阅读:
    bzoj 3091 城市旅行(LCT+数学分析)
    bzoj 2843 极地旅行社(LCT)
    Tsinsen A1303. tree(伍一鸣) (LCT+处理标记)
    bzoj 2002 [Hnoi2010]Bounce 弹飞绵羊(LCT)
    bzoj 2049 [Sdoi2008]Cave 洞穴勘测(LCT)
    vijos P1213 80人环游世界(有源汇的上下界费用流)
    bzoj 3698 XWW的难题(有源汇的上下界最大流)
    bzoj 2502 清理雪道(有源汇的上下界最小流)
    sgu 176 Flow construction(有源汇的上下界最小流)
    详解 $_SERVER 函数中QUERY_STRING和REQUEST_URI区别
  • 原文地址:https://www.cnblogs.com/xiaohong/p/2394268.html
Copyright © 2011-2022 走看看