6-普遍的IE5、CSS兼容性问题总结

2017-01-12 19:15:06来源:CSDN作者:Bug_money人点击

day06 CSS兼容性问题
第一部分:
    1,浏览器默认样式
        问题:
            有些浏览器默认会给一些标签添加一些样式,并且不同浏览器添加的样式不相同,这样会导致我们布局的页面在不同浏览器发生错乱
        解决:
            清除默认样式,保证在每个浏览器样式统一
            body,p,ul,h1,h2,h3,h4,h5,h6,ol,dl,dd,form,input,ul,ol{
                marigin:0;
                padding:0;
                list-style:none;
                font-weight:normal;
            }
            img{border:none;}
    2,img标签底部间隙问题
        问题:
            div中包含一张图片,底部可能有2px,4px或更多的间隙,不同的font-size会影响这个间隙的大小。
        解决:
            1.将图片的垂直对其方式vertical-align,值为top或者bottom
            2.将图片转换为块元素display:block
            3.将包含图片的父容器的字体大小设置为0,font-size:0

    3,img标签IE下图片有边框
        问题:
            html图片img加了超链接之后产生蓝色边框(IE6~10)
        解决:
            img{border:none;}
    4,margin上下边框合并问题
        问题:
            两个div容器,如果同时给上下两个div都加外边框的话,会发生边框合并
            div{
                border: 1px solid gray;
                width: 100px;
                height: 100px;
            }
            div.one{
                margin-bottom: 30px;
            }
            div.two{
                margin-top: 50px;
            }
            one和two相距50px
        解决:
            只给一个容器调整外边框即可,不要同时给两个

    5,IE6双倍边距bug    [出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现]
        问题:
            当我们给元素添加浮动的并指定左外边距的时候,IE5,6会出现双倍边距
            div.outer{
                width: 100px;
                height: 100px;
                margin-left: 10px;
                float:left;
                display: inline;
            }
        解决:
            给浮动的元素指定display:inline;
    6,父容器(子元素浮动)高度为0
        问题:
            父元素的高度不确定,且子元素个数不确定,而且还是float会引发父元素高度为0问题,浮动的子元素层级高于父元素导致撑不开父元素的高度
        解决:
            在使用float元素的父元素结束前加一个高度为0宽为0且有clear:both样式的空DIV
            <div style="clear:both;"></div>
            在父元素上添加overflow:hidden
    8,IE6不支持固定定位  fixed
        解决:
            div{
                width:100px;
                height:100px;
                border:1px solid gray;
                position:fixed;
                bottom:20px;
                right:30px;
                /*---ie6---*/
                position:absolute;
                top:expression(eval(document.documentElement.scrollTop+200));
            }
            *html{
                background-image:url(blank:about);
                background-attachment:absolute;
            }
    9,CSS hack
        .bb{
            background-color:#f1ee18;/*所有识别*/
            background-color:#00deff/9;/*IE6,7,8识别*/
            +background-color:#f1ee18;/*IE6,7识别*/
            _background-color:#f1ee18;/*IE6识别*/
        }

(注意) 不同浏览器解析盒子模型的差异:
            IE5、IE6盒子  width = 内容 + border + padding
                盒子占据的宽度 = margin*2+width
                盒子占据的高度 = margin*2+height
                盒子实际的宽度 = width
                盒子实际的高度 = height

            W3C盒子 width = 内容
                盒子占据的宽度 = margin*2+border*2+padding*2+width
                盒子占据的高度 = margin*2+border*2+padding*2+height
                盒子实际的宽度 = border*2+padding*2+width
                盒子实际的高度 = border*2+padding*2+height
        3) 设置浏览器去遵循w3c标准
            只需要在网页的顶部加上DOCTYPE声明即可
            !important的使用
            p{
                color:red !important;
                color:blue;
            }
            当不加!important;的时候,后者覆盖前者,当加上之后说明第一个,样式优先级更高,采用前者,但是Ie6不支持!important;

***********************************************
1.常见兼容性问题有哪些?
    1) img有间隙(与盒子)
    2) img有边框(与超链接)
    3) 双倍边距(float:left;margin-left:10)
2.解决兼容性问题的方法
    1) !important
        ie7,ie8,firefox,chrome等高端浏览器下,已经可以识别
    2) CSS hack
        1. 注释法
            通常用于head标签内部,通过link引用不同的css
            <!--[if IE]>
                <link href="ie.css" />
            <![endif]-->

            <!--[if ! IE]>
                <link href="fie.css" />
            <![endif]-->

            <!--[if IE 6]>
                <link href="ie6.css" />
            <![endif]-->
                        
        2. 属性前缀法
            1.  _和-  :仅IE6支持     
            2.  *     :IE6、E7支持
            用于css属性前
            #tip{
                background:blue;/*Firefox背景变蓝色 所有浏览器都支持*/
                
                *background:black;/*IE7背景变黑色 IE6、7支持又一次覆盖上面样式*/
                _background:orange;/*IE6背景变橘色 紧IE6支持又一次覆盖上面样式*/
            }  


            1.  /9    :所有IE浏览器都支持     
            2.  /0    :IE8、IE9支持,opera部分支持
            3.  /9/0  :IE8部分支持、IE9支持     
            4.  /0/9  :IE8、IE9支持
            用于属性值后

            #tip{
                background:red/9;/*IE8背景变红色 IE6、7、8、9支持覆盖上面样式*/
            }
    3) meta方法
        使用X-UA-Compatible来设置IE浏览器兼容模式
        <head>
            <meta http-equiv="X-UA-Compatible" content=""></meta>
        </head>

常见布局
    1.行级布局
    2.列级布局
    3.定位布局
    ----------
    4.复杂布局
        一行中多个子级元素有边框,并且宽度是经过严格计算,这时候不能全部浮动,否则会全部错位
        <div class="outer">
            <div class="inner1"></div>
            <div class="inner2"></div>
            <div class="inner3"></div>
        </div>
        前提:有边框;宽度严格计算

        inner1    左浮动
        inner2  左浮动
        inner3  不浮动,margin-left
        
        inner1    左浮动
        inner2  左浮动
        inner3  右浮动  
            不需要指定inner2的右外边距以及inner3左外边距
        
        相对定位

IE兼容性
    自适应布局(计算屏幕分辨率,浏览器视口大小 JS)
    
1.自己高度决定父级高度
<div class="outer">
    <div class="inner"></div>
</div>
    outer不指定高度
    inner指定高度,内边距,边框 外边距
 
    outer的高度=
        inner高度+inner内边距+边框
    ---如果outer{overflow:hidden} 让父级的边界与子级的边界重合---
    outer的高度=

        inner高度+inner内边距+边框+外边距


    父级{overflow:hidden}
      1)父级宽高指定: 超过部分隐藏
      2)父级宽高没有指定,子级浮动,清除子级浮动
      3)父级宽高没有指定,子级不浮动,父级的内边紧贴子级外边
   兄弟{overflow:hidden}
      one浮动,two不浮动
      two如果{overflow:hidden}
      two位于一列


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台