IE瀏覽器安全色問題(上)——html和css的相容寫法，css寫法

IE瀏覽器安全色問題(上)——html和css的相容寫法，css寫法

使用者使用的瀏覽器五花八門，我們要保證每一種瀏覽器都能相容我們的代碼，不能要求使用者去改變瀏覽器，那麼就得在我們的代碼上下功夫。此時我們要用到hack。

HACK就是針對不同的瀏覽器寫不同的HTML、CSS樣式，從而使各種瀏覽器達到一致的渲染效果。

下面我們就分別瞭解一下HTML的hack和CSS的hack。

（一）、HTML的hack

HTML的hack由注釋<!--  -->演變而來，在進階瀏覽器中注釋不會被載入，把IE瀏覽器的相容代碼寫在注釋中，IE瀏覽器會識別。

HTML的hack代碼模板：

註：

①用於寫相容的注釋，標籤內首位都要加！驚嘆號。

②單詞都寫在一對中括弧中

③IE和版本號碼之間要加空格

④不加比較單詞，表示只相容這一個版本；

比較單詞：lt=less than(小於)、lte=less than or equal (小於等於)、gt=great than(大於)、gte=great than or equal(大於等於)

<!--[if IE ６]>    <ｐ>只有IE6認識我<／p><![endif]-->

只要記住這一個模板就知道HTML的相容怎麼寫了，下面我們列舉幾個：

<!--[if gte IE 9]>       <h1>大於等於IE9的瀏覽器能看到</h1><![endif]-->

<!--[if lte IE 8]>       <h1 class="red">您的瀏覽器版本過低，IE8及以下版本不支援新樣式，請更新瀏覽器</h1><![endif]-->

單獨寫給IE6的解決相容問題的HTML代碼：<!--[if IE 6]>     <script src="js/iepng.js" type="text/javascript"></script>     <script type="text/javascript">       EvPNG.fix('div,ul,img,li,input,span,b,h1,h2,h3,h4');     </script><![endif]-->

 

（二）、CSS的hack

CSS的hack包括：屬性的hack和選取器的hack

設定css的hack要注意的是css樣式的層疊性，給同一個元素設定的相容寫法必須寫在後面，否則會被層疊掉。

（1）屬性的hack

①只相容IE6的hack

hack符：-或_，當做首碼寫在屬性前面，中間不加空格

在屬性名稱前面加短橫-或者底線_(原理：進階瀏覽器及其他瀏覽器會認為這個首碼符號是一個unknown property name)，未知的屬性名稱，不會報錯，不予載入。

例：

background:red;    //進階瀏覽器識別_background:pink;    //僅IE6識別

 

②相容IE6、7的hack

 hack符： ` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 中的任一字元，作為首碼寫在屬性前面

例：

background:red;    //進階瀏覽器識別！background:pink;    //僅IE6、7識別

 

③只相容IE8的hack

hack符：\0/，必須寫在屬性值與分號之間，中間不加空格

background:red;    //進階瀏覽器識別background:pink\0/;    //僅IE8識別

 

④相容IE8、9、10的hack

hack符：\0，必須寫在屬性值與分號之間，中間不加空格

background:red;    //進階瀏覽器識別background:pink\0;    //IE8、9、10識別

 

⑤相容IE6、7、8、9、10

hack符：\9，必須寫在屬性值與分號之間，中間不加空格

 

（2）選取器的hack

給選取器添加hack，這個選取器中的樣式都是IE相容樣式，其他進階瀏覽器不識別，同理給同一個選取器設定的相容樣式要寫在進階瀏覽器可識別的常規樣式後面，否則會被層疊

①IE6及以下版本的hack

hack符：* html，*和html之間有空格，再加一個空格，後面寫選取器

例：

<!--常規寫法-->
        .box{            width: 200px;            height: 200px;            border-radius: 50%;            background: yellowgreen;        }
<！--相容寫法-->        * html .box{            width: 100px;            height: 100px;            background: skyblue;        }

 

②IE7及以下版本的hack

hack符：，英文逗號，寫在選取器後面，不加空格

例：

.box,{    background: #999;    border: 10px solid red;

 

③相容IE6以外的其他版本的hack

hack符：html>body，寫在選取器前面，與選取器之間有一個空格隔開

例：

html>body .box{    background: yellow;}

 

④相容IE6、7以外的版本的hack

hack符：html>/**/或html~/**/,寫在選取器前面，與選取器之間有一個空格隔開

例：

html>/**/body .box{    background: purple;}