這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)實現(xiàn)IE6、IE7、Firefox兼容的兩種方案是怎樣的，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比金牛網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式金牛網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋金牛地區(qū)。費用合理售后完善，10年實體公司更值得信賴。

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

◆第一種方案：CSSHack

具體寫法很容易：

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

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

***的應(yīng)用就是可以讓IE6也“支持”position:fixed，而且，配合這個原理，可以做到不引入JavaScript代碼（僅用IE6的expression），我這里有一個現(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方案，在用戶瀏覽時，根據(jù)瀏覽器類型及版本號不同，分別加載不同的css文件。

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

附：各款瀏覽器對選擇器的支持情況

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

◆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;}

上述就是小編為大家分享的實現(xiàn)IE6、IE7、Firefox兼容的兩種方案是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：實現(xiàn)IE6、IE7、Firefox兼容的兩種方案是怎樣的
URL網(wǎng)址：http://aaarwkj.com/article6/pchjog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、ChatGPT、網(wǎng)站策劃、靜態(tài)網(wǎng)站、微信公眾號、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)