目標：兼容IE6 IE7 Firefox；
當我和我們的美工開(kāi)始著(zhù)手進(jìn)行網(wǎng)站的瀏覽器兼容工作的時(shí)候，有一個(gè)明顯的感覺(jué)：以前我們被IE慣壞了，由奢入儉難，改變壞毛病是不容易??；如何現存系統進(jìn)行瀏覽器兼容呢？以后的工作中怎么進(jìn)行瀏覽器兼容呢？
開(kāi)始我用事先想好的一套：用搜索引擎搜索出來(lái)各種瀏覽器兼容的方案，比如：兩個(gè)層重疊了怎么處理，表格撐開(kāi)了怎么處理...然后整理出來(lái)一份文檔放在團隊共享。我的確就是這樣做的，從早晨開(kāi)始做到晚上8點(diǎn)，也有“成就”：40多頁(yè)的文檔；可就在臨睡覺(jué)之前我意識到這是一件“勤勞而愚蠢的事情”。
原因：頁(yè)面對了，不考慮瀏覽器對HTML元素渲染的差別，那么在所有瀏覽器中顯示基本一樣；但是頁(yè)面錯了那就花樣百出了。比如同樣是一個(gè)DIV的閉合標簽沒(méi)有寫(xiě)，在火狐里面，有可能一個(gè)頁(yè)面是表現成層重疊，另一個(gè)頁(yè)面表現為這個(gè)層跑到頁(yè)面最下面了。而在IE中這有可能是完全正常的。我做的工作是什么呢？是在窮舉出所有的錯誤情況并找出解決方案，豈不荒唐
無(wú)論整體思路有沒(méi)有，手頭的問(wèn)題還是要解決的，在解決問(wèn)題的過(guò)程中，一切豁然開(kāi)朗；
那是一個(gè)系統中最重要的頁(yè)面，也是在火狐中最混亂的頁(yè)面：有一部分功能被覆蓋，左右兩個(gè)DIV一上一下，隨著(zhù)頁(yè)面內容展開(kāi)footer不自動(dòng)往下延伸...經(jīng)過(guò)兩天的奮戰頁(yè)面正常了，回頭看看我們到底做了什么呢？我們實(shí)質(zhì)上是在無(wú)限的靠近W3C標準。
于是，一個(gè)個(gè)問(wèn)題迎刃而解：對于現存的頁(yè)面，用W3C驗證工具，從Fatal級別的錯誤開(kāi)始解決；以后的開(kāi)發(fā)中頁(yè)面的瀏覽器兼容怎么保證----只要遵循W3C標準做就可以了。這里有一個(gè)技巧，不是所有瀏覽器都完美的支持W3C的所有標準，同時(shí)W3C標準在有些地方的確吹毛求疵，所以我們大體上遵循W3C的標準，但是頁(yè)面上并不添加W3C的聲明。
做瀏覽器兼容開(kāi)始做的比較累，后來(lái)找到一個(gè)工具，一開(kāi)始我只告訴她，沒(méi)想到一傳十十傳百，竟成了眾人皆知的秘密（玩笑了）----FireBug+Yslow；http://com3.devnet.re3.yahoo.com/yslow/ 前者是調試腳本和頁(yè)面樣式的絕佳工具，可以在腳本中設置斷點(diǎn)。后者則是根據High performance Web sites提到的14條原則做成了一個(gè)工具：
YSlow analyzes web pages and tells you why they're slow based on the rules for high performance web sites. YSlow is a Firefox add-on integrated with the popular Firebug web development tool.
做瀏覽器兼容時(shí)遇到的一些腳本兼容問(wèn)題：
1.Firefox里面不能操作剪貼板（有曲線(xiàn)救國之策么？）
2.IE里面的event.srcElement在FireFox里面是event.target注意兼顧
3.IE里面的 div.innerText;在FireFox里面是div.textContent;
4.文本超長(cháng)自動(dòng)省略： style="overflow: hidden; text-overflow: ellipsis; width: 260px; white-space: nowrap; cursor: pointer; "注意要刪掉頁(yè)面上的W3c標準！
5.如果真的需要為不同的瀏覽器做區分那么可以
if (window.navigator.userAgent.indexOf("MSIE")>=1) //IE6 7
if (window.navigator.userAgent.indexOf("Firefox")>=1) //FF
6.CSS方面也有一些做瀏覽器兼容的策略 就不越俎代庖了 可以搜索一下
總結一下：
1. 遵循標準但是不把W3C標準聲明添加到頁(yè)面上，這種做法在時(shí)間和頁(yè)面質(zhì)量之間做了一個(gè)折衷
2.對現存的頁(yè)面做美化 可以從驗證W3C開(kāi)始 這是一個(gè)好的切入點(diǎn)
3.瀏覽器兼容在新頁(yè)面的開(kāi)發(fā)時(shí)就要考慮，完成之后再做成本是完全不一樣的 類(lèi)似于代碼重構
4.有些javascript編寫(xiě)也要關(guān)注一些敏感的瀏覽器兼容問(wèn)題
5.多說(shuō)一句：頁(yè)面開(kāi)發(fā)人員學(xué)一點(diǎn)CSS的知識對于解決瀏覽器兼容的問(wèn)題是很有幫助的
回頭再說(shuō)，現在開(kāi)始......
聯(lián)系客服
