IE6、IE7、Firefox兼容性問題一直是大家比較關(guān)注的話題，這里向大家介紹一下解決IE6、IE7、Firefox兼容的兩種方案，相信本文介紹一定會(huì)讓你有所收獲。

解決IE6、IE7、Firefox兼容的兩種方案

◆***種方案：CSSHack

具體寫法很容易：

#someNode  
{  
position:fixed;  
#position:fixed;  
_position:fixed;  
}  
 

***排給Firefox以及其他瀏覽器看
第二排給IE7（可能以后的IE8、IE9也是如此，誰知道呢）看
第三排給IE6以及更老的版本看

***的應(yīng)用就是可以讓IE6也“支持”position:fixed，而且，配合這個(gè)原理，可以做到不引入JavaScript代碼（僅用IE6的expression），我這里有一個(gè)現(xiàn)成的頁面，CSS如下寫：

#ff-r  
{  
position:fixed;  
_position:absolute;  
right:15px;  
top:15px;  
_top:expression(eval(document.compatMode&&  
document.compatMode=='CSS1Compat')?  
documentElement.scrollTop+15:  
document.body.scrollTop+  
(document.body.clientHeight  
-this.clientHeight));  
}  
 

 ◆第二種方案：

為不同的瀏覽器建立不同的.css方案，在用戶瀏覽時(shí)，根據(jù)瀏覽器類型及版本號(hào)不同，分別加載不同的css文件。

當(dāng)然，這里又產(chǎn)生兩種方案，用JS判斷或服務(wù)器端方法。

附：各款瀏覽器對(duì)選擇器的支持情況

在正常的selector{property:value;}的基礎(chǔ)上常會(huì)根據(jù)具體情況為相同元素使用Hack以達(dá)到瀏覽器間統(tǒng)一。

◆IE系列:

selector{+property:value;}在屬性名前加上加號(hào)"+",這個(gè)Hack只有IE系列可以識(shí)別.
selector{*property:value;}在屬性名前加上星號(hào)"*",這個(gè)Hack只有IE系列可以識(shí)別.
selector{_property:value;}在屬性名前加上下劃線"_",這個(gè)Hack只有IE系列(除IE7外)識(shí)別.
*htmlselector{property:value;}在選擇器上運(yùn)用繼承法*htmlselector,這個(gè)Hack只有IE系列(除IE7外)可以識(shí)別.
html/**/>bodyselector{property:value;}在選擇器上運(yùn)用繼承法html/**/>bodyselector,這個(gè)Hack只有IE系列(除IE7外)可以識(shí)別.
selector{property/**/:value;}在屬性名和冒號(hào)":"之間加入注釋,屏蔽IE6用.
selector/**/{property/**/:value;}在選擇器和花括號(hào)"{"之間以及在屬性名和冒號(hào)":"之間加入注釋,屏蔽IE5和IE6用(不屏蔽IE5.5).
select/**/{property:value;}在選擇器和花括號(hào)"{"之間加入注釋,屏蔽IE5用.
*+htmlselector{property:value!important;}在選擇器上運(yùn)用繼承法*+htmlselector再加上!important,這個(gè)Hack只有IE7可以識(shí)別.
Firefox:

*:lang(lang)selector{property:value!important;}用偽類lang(語言)再加上!important進(jìn)行定義的話,目前只有Firefox可以識(shí)別.
Safari:

selector:empty{property:value!important;}用偽類empty再加上!important進(jìn)行定義的話,目前只有Safari可以識(shí)別.
Opera:

@mediaalland(min-width:0px){selector{property:value;}}利用特殊繼承法進(jìn)行定義的話,目前只有Opera可以識(shí)別.

◆對(duì)Hack的運(yùn)用,最普遍的是CSS盒模型Hack,清除浮動(dòng)Hack.

CSS盒模型在IE5.X上是有嚴(yán)重解析錯(cuò)誤的.這個(gè)Hack針對(duì)IE5.X：

selctor{width:IE5.X寬度;voice-family:"\"}\"";  
 
voice-family:inherit;width:正確寬度;}  

清除浮動(dòng)Hack 

selector:after{content:".";display:block;height:0;clear:both;  
visibility:hidden;}  

【編輯推薦】

1. IE8與IE7實(shí)現(xiàn)共存的兩種方法揭秘
2. DIV層在IE6下被下拉框遮擋的解決方法
3. JavaScript巧解IE6至IE8兼容問題
4. IE6 IE7 IE8瀏覽器的兼容性對(duì)弈
5. 使用X-UA-Compatible來設(shè)置IE8兼容模式