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