<转>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 { width: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;
      width: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));}
posted @ 2012-03-13 18:03  小精灵YY  阅读(450)  评论(0)  编辑  收藏  举报