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