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

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位于一列