IE6遇到问题集合

主要记录我在调试IE6时遇到的一些问题:

1.float right 换行bug

   产生原因:块里面有几个行内元素,最后一个需要在右边。

   结构例如:<div> 

                         <span class="left">左边</span> 

                         <span class="center">中间</span> 

                         <span style="float: right"class="right">右边</span> 

                    </div>

   IE6中的显示是:右边的跳到下一行里面。

   解决方法:把float的模块放到非float的前面即可

2.IE6的png半透明问题

   产生原因:IE6不支持png24的Alpha透明背景,但是它支持png8格式的全透明背景是索引透明背景。

   解决方法大全:

   http://www.cnblogs.com/wanghun/archive/2012/03/29/2423024.html

   使用过后的疑惑:

   2.1方法一的直接使用滤镜效果,图片是成功了,但是文字消失了。

   2.2方法五使用貌似无效,不知是否是路径有误。

   2.3方法七成功,但是同学使用的时候出错,究其原因应该是JS混乱了。

3.IE6的margin-top失效

   我这个失效很奇异,跟网上说的情况完全不同,因为我的div是body的第一个元素,不知道是不是里面设置了position:relative

   暂时想到的解决方法是:

   使用body设置padding-top把div层顶下来。

4.IE6,IE7上使用inline-block

   display:inline-block;     

   *display:inline;           /*for IE6 IE 7*/
   *zoom:1; 

     IE6、7 中 display:inline-block 是可以触发 hasLayout 的,触发了 hasLayout 的元素表现出来的特征就是一个独立的矩形容器,可以设置宽高而且不受外部元素的影响,类似于现代浏览器中的 Block formatting contexts (块级格式化上下文)的概念。当IE6 中元素使用了inline-block只是触发了 hasLayout 也不能具有 inline-block 元素不换行的特性。需要元素转化为 inline 元素,强制其不换行;然后通过 zoom:1 触发 hasLayout,使其可以设置宽高。

5.IE6的清除浮动

   .clearfix:after{

       visibility:hidden;
       display:block;
       font:0;
       content:"";
       clear:both;
       height:0;
}
   .clearfix{
       *zoom:1; /*for IE6*/
}

6.使用inline-block和text-indent引起的问题

   在IE6、IE7中使用inline-block(这里已经用了上面hack的方法),再使用text-indent时,文字以及整个层都会移动响应的位置。

  解决方法:

      1.改回display:block。

   我个人认为如果我自己的话,不会采用这个方法的,我就是想要inline-block那个显示方式,为啥我还要改回block呢。

      2.使用font-size:0; line-height:0;

   我个人也不推荐这个,对于可访问性非常不好。

      3.在那标签Html前面加上&nbsp;

        这个我也不大推崇,因为CSS的事情不应该使用Html来hack。

      4.给元素加 position:absolute;

    可以说只剩下这个较为可行了。

      造成这样的原因:IE6/IE7并没有真正实现inline-block,而是通过设置display:inline-block触发了IE的layout,从而使内联元素拥有了inline-block属性的表症。inline或inline-block元素设置text-indent在IE6/IE7中显示不正常的bug致使text-indent会传递到父及元素,也就出现了以上所说的问题。

原文地址:https://www.cnblogs.com/zhuyingyan/p/2604690.html