常見的兼容性駭客

一、瀏覽器兼容性駭客:

    使用目的: 保證書寫的網頁在不同的瀏覽器上都能兼容
    定義: 針對不同的瀏覽器書寫不同的HTML結構, CSS樣式, 從而使瀏覽器達到一定的渲染效果。

常見的hack: HTML hark和CSS hack。 二、HTML hack:

    常見的HTML hack手段之一: 條件註釋；
    普通的HTML註釋: <!-- 註釋內容 -->
    HTML hack提供的條件註釋:
  		 <!--[if IE 8]> 
        	要寫的兼容代碼
        <link rel="stylesheet" type="text/css" href="main.css"/>
        <![endif]-->
      如果是IE8瀏覽器, 那麼就會執行條件註釋裏的代碼, 去加載，main.css樣式表。
      如果不是IE8瀏覽器, 就不會執行條件註釋裏的代碼。

總結條件註釋:

    條件註釋是IE瀏覽器的專利。
    條件註釋是IE5後引入的, 所以針對IE5以下的IE版本瀏覽器無效。(同時, 微軟已經不再針對IE10及以上的瀏覽器版本支持條件註釋了)
    因此, 不要針對>=IE10瀏覽器使用條件註釋。

書寫條件註釋的幾個注意點:

    1.用於書寫兼容的註釋, "<"後要加"!"感嘆號;
    2.單詞都寫在中括號中"[]";
    3.IE和版本號之間要加空格;
    4.不加比較單詞, 表示只兼容一個版本。

常見的比較單詞:

    lt==>less than (小於)
    lte==> less than orequal (小於等於)
    gt==> great than (大於)
    gte==> great than orequal (大於等於)
        <!--[if IE 6]>
        <p>只是IE6瀏覽器才能看到我</p>
        <![endif]-->

只在IE瀏覽器下生效

	<!--[if IE]>
		 只會在IE瀏覽器顯示的代碼
	<![endif]-->

非IE瀏覽器生效的條件註釋:

 	<!--[if !IE]>
        只會在非IE瀏覽器下顯示的代碼
	<![endif]-->

三、CSShack:

    CSShack包括兩種:屬性hack和選擇器hack
        1.屬性hack:
            1)只兼容IE6的hack：
               符號: -或者_,當做屬性的前綴, 和屬性之間不能有空格
               例子:
                    background:red;//
                    高級瀏覽器識別: _background:green;//
                    (僅IE6識別)
          原理: 高級瀏覽器會將"-","_"符號看作是一個未知的屬性名不會報錯, 不予加載。
            2)兼容IE6,7的hack:
               符號: 鍵盤上能看到的符號都可以
               例子:
                    background:red;//
                    高級瀏覽器識別: !background:green;//
                (僅IE7識別)
            3)兼容IE8的hack:
               符號: \0/
               書寫位置: 在尾部分號前面
               例子:
                    background:red;//
                    高級瀏覽器識別:background:green\0/;//
                (僅IE8識別)
            4)兼容IE8,9,10的hack:
                符號: \0
                書寫位置: 屬性值尾部分號之前
                例子:
                     background:red;//
                     高級瀏覽器識別:background:green\0;//
                (僅IE8,9,10識別)
            5)兼容IE6,7,8,9,10hack:
                符號: \9
                書寫位置: 屬性值尾部分號之前
                例子:
                     background:red;//
                     高級瀏覽器識別:background:green\9;//
                (IE6,7,8,9,10識別)
        2.選擇器hack:
             概念: 給選擇器添加hack, 這個選擇器中的樣式都是IE兼容樣式, 其他高級瀏覽器不會識別,
                   同理, 同一個選擇器設置交融樣式要寫在高級樣式可識別的常規樣式後面, 否則會被層疊。
             1)兼容IE6及以下的hack:
                 符號: * html;
                 書寫規則: *和html之間要有空格, 然後再加一個空格後面寫選擇器。
                 例子:
                     常規寫法:
                          .box {
                          width:200px;
                          height:200px;
                          background:red;
                          }
                      兼容寫法:
                          * html .box {
                          width:200px;
                          height:200px;
                          background:red;
                          }
             2)兼容IE7及以下版本hack:
                 符號: ",";
                 書寫規則: 英文逗號,寫在選擇器的後面；
                 例子:
                     常規寫法:
                          .box {
                              width:200px;
                              height:200px;
                              background:red;
                          }
                      兼容寫法:
                          .box, {
                              width:200px;
                              height:200px;
                              background:red;
                          }
            3)兼容除了IE6以外的其他版本hack:
                符號: html>body
                書寫規則: 寫在選擇器的前面,與選擇器之間有一個空格。
                例子:
                     常規寫法:
                          .box {
                              width:200px;
                              height:200px;
                              background:red;
                          }
                      兼容寫法:
                          html>body .box {
                              width:200px;
                              height:200px;
                              background:red;
                          }
             4)兼容除了IE6,7以外的其他版本的hack:
                 符號: html>/**/body
                 書寫規則: 寫在選擇器的前面, 與選擇器之間有一個空格。
                 例子:
                     常規寫法:
                          .box {
                              width:200px;
                              height:200px;
                              background:red;
                          }
                      兼容寫法:
                          html>/**/body .box {
                              width:200px;
                              height:200px;
                              background:red;
                          }

作業：

    	寫一個div，在IE6以下顯示爲gold寬高是200,400；
          在IE7下是綠色，邊框是1像素的紅色實線。
          在IE8及以上版本顯示爲藍色寬高比變爲100%400%