• 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会传递到父及元素,也就出现了以上所说的问题。

  • 相关阅读:
    CSS属性选择器
    CSS基本选择器
    CSS的引入方式
    CSS
    228.4.flask试图
    227.3.flask路由
    225.1.flask初体验
    226.2.flask配置文件
    229.5.flask请求和相应
    230.6.flask模板
  • 原文地址:https://www.cnblogs.com/zhuyingyan/p/2604690.html
Copyright © 2020-2023  润新知