實現IE6、IE7、Firefox兼容的兩種方案
IE6、IE7、Firefox兼容性問題一直是大家比較關注的話題，這里向大家介紹一下解決IE6、IE7、Firefox兼容的兩種方案，相信本文介紹一定會讓你有所收獲。
解決IE6、IE7、Firefox兼容的兩種方案
◆***種方案：CSSHack
具體寫法很容易：
- #someNode
- {
- position:fixed;
- #position:fixed;
- _position:fixed;
- }
***排給Firefox以及其他瀏覽器看
第二排給IE7（可能以后的IE8、IE9也是如此，誰知道呢）看
第三排給IE6以及更老的版本看
***的應用就是可以讓IE6也“支持”position:fixed，而且，配合這個原理，可以做到不引入JavaScript代碼（僅用IE6的expression），我這里有一個現成的頁面，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方案，在用戶瀏覽時，根據瀏覽器類型及版本號不同，分別加載不同的css文件。
當然，這里又產生兩種方案，用JS判斷或服務器端方法。
附：各款瀏覽器對選擇器的支持情況
在正常的selector{property:value;}的基礎上常會根據具體情況為相同元素使用Hack以達到瀏覽器間統一。
◆IE系列:
selector{+property:value;}在屬性名前加上加號"+",這個Hack只有IE系列可以識別.
selector{*property:value;}在屬性名前加上星號"*",這個Hack只有IE系列可以識別.
selector{_property:value;}在屬性名前加上下劃線"_",這個Hack只有IE系列(除IE7外)識別.
*htmlselector{property:value;}在選擇器上運用繼承法*htmlselector,這個Hack只有IE系列(除IE7外)可以識別.
html/**/>bodyselector{property:value;}在選擇器上運用繼承法html/**/>bodyselector,這個Hack只有IE系列(除IE7外)可以識別.
selector{property/**/:value;}在屬性名和冒號":"之間加入注釋,屏蔽IE6用.
selector/**/{property/**/:value;}在選擇器和花括號"{"之間以及在屬性名和冒號":"之間加入注釋,屏蔽IE5和IE6用(不屏蔽IE5.5).
select/**/{property:value;}在選擇器和花括號"{"之間加入注釋,屏蔽IE5用.
*+htmlselector{property:value!important;}在選擇器上運用繼承法*+htmlselector再加上!important,這個Hack只有IE7可以識別.
Firefox:
*:lang(lang)selector{property:value!important;}用偽類lang(語言)再加上!important進行定義的話,目前只有Firefox可以識別.
Safari:
selector:empty{property:value!important;}用偽類empty再加上!important進行定義的話,目前只有Safari可以識別.
Opera:
@mediaalland(min-width:0px){selector{property:value;}}利用特殊繼承法進行定義的話,目前只有Opera可以識別.
◆對Hack的運用,最普遍的是CSS盒模型Hack,清除浮動Hack.
CSS盒模型在IE5.X上是有嚴重解析錯誤的.這個Hack針對IE5.X：
- selctor{width:IE5.X寬度;voice-family:"\"}\"";
- voice-family:inherit;width:正確寬度;}
清除浮動Hack
- selector:after{content:".";display:block;height:0;clear:both;
- visibility:hidden;}
【編輯推薦】
- IE8與IE7實現共存的兩種方法揭秘
- DIV層在IE6下被下拉框遮擋的解決方法
- JavaScript巧解IE6至IE8兼容問題
- IE6 IE7 IE8瀏覽器的兼容性對弈
- 使用X-UA-Compatible來設置IE8兼容模式
