Web標準中兼容問題的解決學習筆記

1、 兼容問題產生的緣由

1.  各類瀏覽器是由不一樣的公司開發的

2. 瀏覽器不斷的更新換代

2、 兼容問題的解決

(一)、從兼容問題產生的緣由看可使用兩種方法解決兼容問題
    1. 使用不會出現兼容問題的屬性
    2. 使用CSS hack
    3. 條件註釋

(二)、解決方案的詳細說明

    1. 使用不會出現兼容問題的屬性

        在IE瀏覽器中若是浮動元素後面緊跟一個普通元素（未定義定位等顯示屬性），則普通元素會顯示在浮動元素的後面，而在Firefox瀏覽器中浮動元素會遮蓋普通元素。若是定義第二個元素也爲浮動元素，則在兩個瀏覽器中會顯示相同的效果。

   2. 使用CSS hack

        hack通常是指對程序或系統進行非官方的修改。CSS hack是一種改善CSS在不一樣瀏覽器下的表現形式的技巧方法。

        ！important就是CSS1定義的語法，做用是提升指定樣式規則的應用優先權。語法格式：{屬性:屬性值 !important }; 

        在IE6.0以前的版本一直都不支持這個語法，而到了IE7.0之後開始支持，能夠利用這必定啊來分別給IE6.0和IE7.0進行不一樣的樣式定義

        示例：
            .hack{
            border:10px solid #aaa !important;
            border:20px solid #222;
            width:250px;
            height:100px;
            font-size:36px;}

    3. 條件註釋

        條件註釋是IE特有的一種功能，能處理IE不一樣版本問題。可是註釋主要是針對XHTML的，而非CSS，因此只能寫在XHTML代碼中進行版本判斷

        示例：
            <!--[if IE]>此內容只有IE可見<![endif]-->
            <!--[if IE 6.0]>此內容只有IE 6.0可見<![endif]-->
            <!--[if !IE 5.0]>此內容除了IE5.0均可見<![endif]-->
            <!--[if gt IE 5.0]>此內容IE 5.0 以上版本均可見<![endif]-->

        說明：
            *  gt 表示 greater than,當前版本以上版本，不包含當前版本
            *  lt 表示 less than，當前版本如下版本，不包含當前版本
            *  gte 表示 greater than or equal，當前版本以上版本，而且包含當前版本
            *  lte 表示less than or equal，當前版本如下版本，而且包含當前版本

3、CSS hack的使用

1.  新的瀏覽器不支持舊的hack，在實際工做中要儘可能避免使用hack。

2. 僅IE 7.0 識別的hack

    *+html就是針對IE 7.0 瀏覽器的hack，這個選擇符寫在相應的選擇符的前面，而且空一格

    示例：
        *+html 選擇符{屬性：值;}

3. 僅IE 6.0 識別的hack

    語法：
            選擇符{_屬性:值;}

    說明：
            下劃線(_)只有在IE 6.0瀏覽器中是識別的，在IE 7.0、Mozilla/Firefox瀏覽器中不可以被識別

4. 僅IE識別的hack

    *在IE瀏覽器中是識別的，在Mozilla/Firefox瀏覽器中不可以被識別

    語法：*選擇符{屬性:屬性值;}

5. 針對Firefox的CSS hack

    針對Firefox瀏覽器的hack通常使用！important方法

4、綜合應用簡單示例

<style>
       .main{
        width:250px;
        height:100px;
        border：#000 10px solid;
        *border:#999 10px solid!important;
        *border:#333 10px solid;}
    </style>

分析：IE 6.0 能夠識別單不能識別!important，因此最終會使用顏色#333， IE 7.0 能夠同時識別和!important因此顯示顏色爲#999 Firefox會忽略*語句，顯示的顏色爲#000