zoukankan      html  css  js  c++  java
  • 小结IE6的坑

    1、z-index在position:relative/absolute等定位属性设置后还是无效,会导致top栏的导航栏目的子菜单被下面的层遮住,无法显示;
    解决办法:?http://www.wufangbo.com/ie6-ie7-z-index-bug/
    就是被子导航列表覆盖的层绝对不能设置为相对定位(在该层中想让其子元素设置为position:absolute;本层设置为position:relative;这样的组合在IE6中是绝对不允许的,解决办法是:去掉父层的position:relative;这个属性,修改其子元素定位为position:relative;即可,这样其父层就不会覆盖子导航列表了)


    2、IE6对display:inline-block;属性支持的不全面,对内联元素支持的还可以,但对块状元素这样设置是无效的;
    解决办法:
    1、display:inline-block; _zoom:1;_display:inline;这样写才行。
    2、将要弄成块状内联元素的div等标签换成内联元素span等,给span  display:inline-block;就行了。


    3、IE6对png24图片的透明度支持的不好,只对png8的图片才支持其透明度,但是png8的图片品质太低,如果是文本的话
    会出现边框锯齿,使得文本图片变得很难看;
    解决办法:
    用带背景的jgp图片代替,背景要与所在容器的背景一致即可。


    4、IE6不支持圆角,圆角要用图片来表现出来,写样式时很麻烦,注意这个问题。


    5、IE6不支持box-shadow这个阴影属性,要做阴影效果必须用滤镜,写法是:
    box-shadow: 0px 2px 2px #BEBEBE;//这是标准浏览器css3的写法,下面是针对IE6的滤镜写法
    filter:progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135,Color='#999999');
    注意:color属性千万不能写成#999,一定要写全,否则会导致阴影跑到左上角去。

    6、IE6中的select框的边框总是保留默认蓝色,无法去除,且其边框也不能简单的用border:0;或border:none;去除
    解决办法是:
    在select框外包含一层div,去除select边框即可,div的边框颜色是可以设置的。
    具体解决代码是:
    □、先给select加一个div父包含块,设置这个父包含块边框颜色为你想要的颜色,如:border: 1px solid #d0dad8;再加上overflow:hidden;属性;表示溢出部分隐藏,其作用原理是:让select偏移-1px的距离,一旦偏移就会触发overflow:hidden;属性,使得select边框被隐藏掉,解决了select边框无法被去除的问题;
    □、接着,按照上面的原理,给select加上margin:-1px;属性,刷新,看到select边框被隐藏掉了,只剩下父层div的边框,看上去是那么回事了;
    □、但是还有一个小尾巴,select默认的右边框还是蓝色的,且显示在没有溢出的div父层内,这时的解决办法是,增大select的宽度width为102%;表示比父层宽,原理也是宽出的部分会被隐藏掉,至此,就完成了兼容IE6以上的select边框的问题
    □、最后,要注意的是别再表格单元格内使用以上效果,因为这么做会遮盖掉单元格td的右边框。

    下面是网上摘录IE6的坑,尽可能往多的说:

    border-style:dotted 点线 IE6不兼容 (除了solid以外,其它都有兼容问题,不完全一样)
    a IE6 不支持a以外的所有标签伪类,IE6以上版本支持所有标签的hover伪类。
    inline-block IE6 7不支持块元素标签的inline-block
    空标签清浮动 IE6 最小高度 19px;这是font-size=0后,IE6下还有2px偏差。通过设置overflow:hidden来隐藏设置高度以外的高度。
    after伪类 IE 6 7不支持after伪类清除浮动,通过zoom或是宽高解决
    IE6 7下浮动元素的父级有宽度就不用清浮动了
    zoom firefox不支持,zoom可以触发ie中的haslayout=true,当父元素没有宽高时,通过zoom和after伪类来兼容各个浏览器。
    overflow IE6下不能包住浮动元素,也就是ie6下overflow 需要配合zoom:1
    float IE 6 7中需要并在同一行的所有元素都要加浮动,在其它浏览器中
    <div>
    <divid=’div1’></div>
    <divid=’div2’>文字</div>
    </div>
    div2可以不加浮动,div1加浮动就可以了。但是ie67中文字环绕会有间隙,所有需要在div2上加浮动。
    IE6下的双边距bug 在ie6下块元素有float和左右的margin,那么左右的margin会被放大2倍。
    IE67下li间隙问题 ie6 7中的li本身没有浮动,但是li中的内容有浮动,li的下边就会产生几像素的间隙。 解决办法:内容有浮动,那么给li也加浮动;给li加vertical-align:top或是其它属性值。
    img{border:none;vertical-align:top;} /*解决a标签下img在ie6下会出现边框,解决图片下的空隙问题*/
    opacity IE8及以下的浏览器用filter:alpha(opacity=0-100), 主流浏览器用opacity:0-1;
    IE6 下的body 和html是没有高度的,所以需要加上 body,html{height:100%}
    IEtester 是不支持滤镜的,ie浏览器是支持的。
    position:fixed IE6不支持固定定位
    position:relative IE6下默认父级可以包住比自己大的子级(二者是没有定位的情况),而其他浏览器是包不住的,会产生溢出。解决办法overflow:hidden,但是 加了overflow:hidden;IE6的父级是包不住子级的相对定位。解决办法:给父级也加上定位(相对、绝对都可以)。
    position:absolute IE6下绝对定位的父级宽高都为奇数时,那么元素的top 和bottom都会有1px的误差。
    <label></label> label标签在如下情况IE6没有效果 <label><inputtype=’radio’>单选按钮的内容</input></label& gt;。一般情况下点击文字和按钮都可以选中,但是ie6下点击文字没有效果。解决办法:<input type=’radio’ id=’a’><label for=’a’>单选按钮的内容</label></input>,将label中的文字和按钮相关联。
    <form></form> IE6下form与form之间是有边距的,解决办法:样式重置。
    input 设置宽高,在各个浏览器效果不一样。通常不设置。
    select 只能设置宽,高存在兼容问题,IE6下设置高没有效果。
    IE6下 子元素可以撑爆父元素设置好的宽度,主流浏览器不可以,解决办法:测量时注意,不要让子元素宽高大于父元素的宽高。

    IE6 下元素浮动,其宽度需要内容撑开,若内容是块元素,ie6下宽度撑开整行。解决办法:给里面的块元素也加上浮动。

    IE67下 块元素想要一样显示,必须都加float,若是采用margin会产生3px的间隙。

    P tdp等标签不可以嵌套块标签

    IE6下最小高度问题
    当ie6下元素高度小于19px时,会默认设置成19px,最好解决办法:给元素加上overflow:hidden;将多余的隐藏掉。还有种办法就是设置元素的font-size:0;但是效果不好仍然会有2px的误差,不建议使用。

    ie6下border 1px dotted点线是虚线,2px就不会出现这样的情况。解决办法:切背景平铺。

    如何避免子元素外边距传递问题

    1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
    2、为父元素添加overflow:hidden;样式即可(完美,ie6下要触发haslayout加上zoom:1;
    3、为父元素或者子元素声明浮动(float:left;可用)
    4、为父元素添加border(border:1pxsolid transparent可用),ie6下margin消失,需要触发haslayout 加上zoom:1;
    5、为父元素或者子元素声明绝对定位

  • 相关阅读:
    JDK1.8(Java Development Kit)安装和环境变量配置
    excel用法
    vue后台管理系统介绍
    linux上配置用户级别的JDK的方法
    Oracle创建数据库
    Oracle创建表空间及用户
    关于Oracle 11g、客户端、服务端及plsql的关系简述
    plsql连接数据库的三种方式
    springboot使用配置文件的方式集成RabbitMQ
    activiti工作流入门学习
  • 原文地址:https://www.cnblogs.com/koleyang/p/5250878.html
Copyright © 2011-2022 走看看