ie瀏覽器兼容性的入門解決方案

IE瀏覽器的兼容性素來是使人頭疼的問題，大名鼎鼎的FUCK-IE不是浪得虛名的。

這裏使用的解決方案是HACK，具體原理就是針對不一樣的瀏覽器寫不一樣的HTML、CSS樣式，從而使各類瀏覽器達到一致的渲染效果。

HTML的兼容寫法

HTML的HACK由註釋<!--  -->演變而來，在高級瀏覽器中註釋不會被加載，把IE瀏覽器的兼容代碼寫在註釋中，IE瀏覽器會識別。

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

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

<!--[if lte IE 8]>
　　<h1 class="red">您的瀏覽器版本太低（IE8及如下版本），請更新瀏覽器！</h1>
<![endif]-->

上面三個例子很是簡單，聰明的你確定能舉三反一。

實際應用場景的話可能是用於添加一些兼容性的JavaScript片斷。

CSS的兼容寫法

CSS的HACK包括屬性的HACK和選擇器的HACK。

要提醒的是，設置CSS的HACK要注意CSS樣式的層疊性，給同一個元素設置的兼容寫法必須寫在後面，不然會被層疊掉。

只兼容IE6的HACK（屬性）

HACK符號是【-】或者【_】，做爲前綴在屬性前面，中間不加空格。在屬性名前加上這個HACK符號，高級瀏覽器及其餘瀏覽器會認爲這是一個未知的屬性，不會加載這個屬性，也不會報錯。

background-color: red; /* 高級瀏覽器識別 */
_background-color: pink; /* 僅IE6識別 */

兼容IE6/7的HACK（屬性）

HACK符號能夠是【`】、【~】、【!】、【@】、【#】、【$】、【%】、【^】、【&】、【*】、【(】、【)】、【+】、【=】、【[】、【]】、【|】、【<】、【>】、【,】和【.】中的任一個字符，做爲前綴寫在屬性前面。

background-color: red; /* 高級瀏覽器識別 */
!background-color: pink; /* 僅IE6/7識別 */

只兼容IE8的HACK（屬性）

HACK符號是【\0/】，必須寫在屬性值與分號之間，中間不加空格。

background-color: red; /* 高級瀏覽器識別 */
background-color: pink\0/; /* 僅IE8識別 */

兼容IE8/9/10的HACK（屬性）

HACK符號是【\0】，必須寫在屬性值與分號之間，中間不加空格。

background-color: red; /* 高級瀏覽器識別 */
background-color: pink\0; /* IE8/9/10識別 */

兼容IE6/7/8/9/10（屬性）

HACK符號是【\9】，必須寫在屬性值與分號之間，中間不加空格。

background-color: red; /* 高級瀏覽器識別 */
background-color: pink\9; /* IE6/7/8/9/10識別 */

兼容IE6及如下版本（選擇器）

HACK符號是【* html】，注意*和html之間有空格，再加一個空格，後面寫選擇器。

/* 常規寫法 */
.box {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: yellowgreen;
}
/* 兼容寫法 */
* html .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
}

兼容IE7及如下版本（選擇器） 

HACK符號是【,】，英文的逗號，直接寫在選擇器的後面，不加空格。

.box, {
    background-color: #999;
}

還有第二種，HACK符號是【*+html】，加一個空格，後面寫選擇器。

*+html .box {
    background-color: #999;
}

兼容IE6之外的其餘版本（選擇器）

HACK符號是【html>body】，寫在選擇器的前面，與選擇器之間有一個空格。

html>body .box {
    background-color: yellow;
}

兼容IE6/7之外的版本（選擇器）

HACK符號是【html>/**/】或【html~/**/】，寫在選擇器的前面，與選擇器之間有一個空格。

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

html~/**/body .box {
    background-color: purple;
}

以上就是IE瀏覽器兼容性的入門解決方案。瀏覽器的兼容性一直是一個很大難題，對於專業前端開發者來講是一個必須勇敢直面的挑戰。而對於非專業前端開發者（好比說我）來講，稍微有了解就行了。

 

"你別皺眉，我走就好。"