網(wǎng)站的瀏覽器兼容問(wèn)題，對(duì)于網(wǎng)站優(yōu)化來(lái)說(shuō)非常重要，如果網(wǎng)站的兼容性不行，，對(duì)于網(wǎng)站的用戶體驗(yàn)度影響非常大。在網(wǎng)站建設(shè)的時(shí)候就要充分考慮到這個(gè)問(wèn)題并解決這個(gè)問(wèn)題。不然會(huì)帶來(lái)許多不好的影響。
1、網(wǎng)站兼容性影響到網(wǎng)站加速載速度
用戶體驗(yàn)度關(guān)就是網(wǎng)站加載速度，如果一個(gè)網(wǎng)站在一個(gè)瀏覽器上加載速度是正常的，秒開；但在另外一個(gè)瀏覽器上卻遲遲不能打開，每次打開都需要花上幾十秒甚至是幾分鐘。那這樣就不行了，用戶不知道這個(gè)網(wǎng)站需要用什么瀏覽器打開的，只管自己方便就用哪個(gè)瀏覽器。如果剛好是用了不兼容的那個(gè)瀏覽器打開網(wǎng)站，那么沒(méi)等到網(wǎng)站打開，用戶都已經(jīng)等不耐煩關(guān)閉掉網(wǎng)站了，你就永遠(yuǎn)失去了一個(gè)潛在客戶了。
2、網(wǎng)站的兼容性影響網(wǎng)站的功能
這個(gè)是對(duì)于用戶和網(wǎng)站運(yùn)營(yíng)維護(hù)人員來(lái)說(shuō)都是有影響的，不同的瀏覽器，有些網(wǎng)站功能可以使用有些則不行。例如是網(wǎng)站的搜索功能，在某瀏覽器，用戶可以通過(guò)網(wǎng)站的搜索框搜索到自己想要的內(nèi)容，在另外一個(gè)瀏覽器則不能使用該功能。另外網(wǎng)站后臺(tái)的維護(hù)，有時(shí)候，在某一瀏覽器上更新編輯時(shí)，發(fā)現(xiàn)很多的編輯框加載不出來(lái)，這樣是非常影響后期網(wǎng)站的維護(hù)工作的。所以在網(wǎng)站建設(shè)的時(shí)候就需要注意好這個(gè)問(wèn)題。
3、網(wǎng)站兼容問(wèn)題還會(huì)影響到網(wǎng)站頁(yè)面的顯示
有時(shí)候我們?cè)谀骋粸g覽器打開網(wǎng)頁(yè)的時(shí)候發(fā)現(xiàn)網(wǎng)站頁(yè)面顯示不完整或者是拉伸縮短等變形問(wèn)題，而在另外一個(gè)瀏覽器上卻沒(méi)有出現(xiàn)這種問(wèn)題。這都是網(wǎng)站的兼容問(wèn)題，網(wǎng)站建設(shè)時(shí)候沒(méi)有考慮到瀏覽器的內(nèi)核上是否都能兼容。你可知道，網(wǎng)站頁(yè)面的顯示也是直接影響到用戶體驗(yàn)的。
網(wǎng)站的兼容性問(wèn)題影響到后期的網(wǎng)站優(yōu)化和運(yùn)營(yíng)，所以在網(wǎng)站建設(shè)的時(shí)候就要充分考慮好、注意好兼容性問(wèn)題，提高網(wǎng)站用戶體驗(yàn)度，才能贏得用戶和搜索引擎的喜愛。
大多數(shù)網(wǎng)站設(shè)計(jì)在網(wǎng)站兼容方面做的不夠好，為什么呢?
2017年，如果說(shuō)你的網(wǎng)站仍然停留在只是Google、百度等PC瀏覽器打開無(wú)異常，而換成其它版本的小眾瀏覽器打開不行或者bug頻出，那便不能算是一個(gè)合格的網(wǎng)站!杭州蒙特網(wǎng)站設(shè)計(jì)很肯定的告訴大家，移動(dòng)端也一樣，不管是iPad還是各種版本的手機(jī)端，都應(yīng)該能保證展現(xiàn)效果一致，且沒(méi)有其他結(jié)構(gòu)變動(dòng)等問(wèn)題。
不得不說(shuō)的是，大多數(shù)網(wǎng)站在兼容性這方面做得并不是太好!
因?yàn)榫W(wǎng)站各種特效的不斷創(chuàng)新和技術(shù)的更新迭代，導(dǎo)致一些老版本或特殊版本的IE等瀏覽器無(wú)法同時(shí)兼容同樣的一種或者多種特效!所以，我們的程序員必須要在保證主流瀏覽器能夠正常訪問(wèn)的基礎(chǔ)上，盡可能的針對(duì)每一個(gè)存在的瀏覽器版本進(jìn)行兼容性優(yōu)化!
網(wǎng)站建設(shè)過(guò)程中的兼容性問(wèn)題怎么破?
當(dāng)然是先從大的主流瀏覽器出發(fā)，在保證主流、占比較大的網(wǎng)站瀏覽器訪問(wèn)網(wǎng)站正常的前提下，再一一通過(guò)測(cè)試調(diào)整各種小額占比瀏覽器的兼容性特效實(shí)現(xiàn)等!當(dāng)然了，總會(huì)有一些比較特殊的效果，很多瀏覽器都需要調(diào)整，導(dǎo)致程序有很多必要和不必要的壟余。
那么，代碼壟余如何解決呢?
一般十幾年的專業(yè)網(wǎng)絡(luò)公司在這方面會(huì)做的很好，網(wǎng)站兼容性真是一個(gè)當(dāng)下必須要解決的問(wèn)題，忽視了它，后期頭疼的問(wèn)題就會(huì)頻繁發(fā)生，沒(méi)有后顧之憂的網(wǎng)站建設(shè)，前期就要做好每一個(gè)建站細(xì)節(jié)。
發(fā)現(xiàn)Web前端開發(fā)工程師煩的就是解決瀏覽器兼容性的問(wèn)題。不過(guò)，別擔(dān)心，既然小編已經(jīng)說(shuō)出來(lái)了，就是給大家?guī)?lái)這一部分的相關(guān)知識(shí)分享給大家，解決大家的煩惱，一下幾點(diǎn)是根據(jù)朋友以及同事和看了某些程序員大佬的博客之后總結(jié)出來(lái)的幾點(diǎn)，希望能夠幫到大家。
我也編程，可兼容使我痛苦
這個(gè)問(wèn)題對(duì)于Web開發(fā)者來(lái)說(shuō)真是頭疼的問(wèn)題，我從事Web開發(fā)也有兩年時(shí)間，期間遇到過(guò)許許多多類似的問(wèn)題，每次都被搞得很累，后來(lái)畫了大半年時(shí)間專門研究Web前端技巧，后我總結(jié)了一些方案出來(lái)：
1.在開發(fā)Web APP的時(shí)候，開發(fā)機(jī)上面把主流瀏覽器都裝上，比如說(shuō)：Chrome、FF、safari、IE、IE Tester... 在大多數(shù)情況下，F(xiàn)F和Chrome差別不是很大。
2.開發(fā)過(guò)程中要注意，每做好一個(gè)樣式，都要跑一遍所有要兼容的瀏覽器，這樣雖然開發(fā)過(guò)程時(shí)間會(huì)比較長(zhǎng)，可是會(huì)比你開發(fā)完成后再來(lái)改效率高得多，我曾經(jīng)就碰到過(guò)一個(gè)產(chǎn)品，開發(fā)完成后由于兼容性問(wèn)題導(dǎo)致其發(fā)展面很窄，后不得不重新開發(fā)。
3.如果真的碰到樣式不兼容的情況，那么只能針對(duì)不同的瀏覽器做相應(yīng)的調(diào)整。
4.一些新的特效可能在一些版本落后的瀏覽器里不兼容，這個(gè)時(shí)候我們的原則就是：不求效果絢麗，只求工整規(guī)范。
5.多積累，多看看符合W3C標(biāo)準(zhǔn)規(guī)范的CSS手冊(cè)和JS手冊(cè)，注意積累，或者用一些開源框架，那樣兼容性可以省下不少時(shí)間。
我們認(rèn)為chrome + firefox + safari + ie9是高端瀏覽器，ie8勉強(qiáng)算準(zhǔn)高端吧。這樣這部分占有率約57%(如果加上其他webkit內(nèi)核的瀏覽器會(huì)更高一些) 已經(jīng)大于ie6 + ie7。
高端和低端瀏覽器的差距可以用html5test量化一下：
Google Chromium 11.0.690的分?jǐn)?shù)是293，而Microsoft Internet Explorer 6.0的分?jǐn)?shù)17，也許有各種fallback方案可以保證完全兼容性各個(gè)瀏覽器，但依然不能保證低端瀏覽器的使用體驗(yàn)，頂多是看起來(lái)各個(gè)瀏覽器都一樣了。因此，現(xiàn)在的設(shè)計(jì)和開發(fā)的策略是瀏覽器分級(jí)支持。優(yōu)先為高端瀏覽器設(shè)計(jì)，同時(shí)考慮低端瀏覽器的退化方案。甚至有些復(fù)雜的應(yīng)用可以拒絕ie6，提示用戶使用高端瀏覽器。豆瓣7月份將會(huì)發(fā)布一款對(duì)ie6說(shuō)no的產(chǎn)品（國(guó)內(nèi)個(gè)拒絕支持ie6的產(chǎn)品吧）
因此不要再考慮向后兼容，應(yīng)該考慮向后退化，更多考慮向前兼容。
那么究如何讓網(wǎng)站建設(shè)HTML文件保持兼容性呢？
一個(gè)設(shè)計(jì)良好的網(wǎng)頁(yè)應(yīng)該能夠被寬帶網(wǎng)上的多媒體高檔電腦或者依然使用慢速M(fèi)ODEM連接的低檔電腦上安裝的瀏覽器閱讀。然而，很多新的網(wǎng)站設(shè)計(jì)者均不是非常的了解如何盡量的讓這些HTML文件保持很好的兼容性。
當(dāng)然，這里有太多的不確定因素影響網(wǎng)頁(yè)后呈現(xiàn)的結(jié)果。首先，計(jì)算機(jī)的顯示器有不同的分辨率和顯示質(zhì)量，其次，運(yùn)行著各種各樣的操作系統(tǒng)，使用著不通版本的WEB瀏覽器
，不同INTERNET連接方式和各種速度的MODEM。我們不能想當(dāng)然的去武斷地判定瀏覽者的喜好。我們還是花點(diǎn)時(shí)間來(lái)測(cè)試頁(yè)面，這樣可以讓每一個(gè)訪問(wèn)者感到愉快。然而，遺憾的是我們沒(méi)有辦法為每一個(gè)訪問(wèn)者來(lái)優(yōu)化頁(yè)面，但是下面講述的幾個(gè)步驟將有助于您保證大多數(shù)訪問(wèn)者的瀏覽效果。
1、不要依賴圖形。
就站點(diǎn)設(shè)計(jì)而言，的確能夠通過(guò)成功的圖形設(shè)計(jì)招徠或者丟失訪問(wèn)者。并非所有的訪問(wèn)者可以完全看到圖片，某些人為了加快存取網(wǎng)絡(luò)的速度已經(jīng)關(guān)閉了瀏覽器端的圖形。簡(jiǎn)而言之，圖形并不能正確的在客戶端加載。
然而，圖形經(jīng)常被用來(lái)作為導(dǎo)航按鈕。舉例來(lái)說(shuō)，訪問(wèn)者經(jīng)常按向左的箭頭返回上一頁(yè)，或者一個(gè)包含問(wèn)號(hào)的圖形可以得到更多的信息，或者按公司的標(biāo)志(LOGO)會(huì)告訴用戶公司的地址和電話號(hào)碼。圖形映射(IMAGE MAP)允許你按圖像的不同區(qū)域連接到不同的地方，這個(gè)經(jīng)常被用來(lái)用作站點(diǎn)地圖，你給訪問(wèn)者提供站點(diǎn)內(nèi)容指引。但是如果你僅僅通過(guò)圖片來(lái)提供站點(diǎn)導(dǎo)航的話，某些訪問(wèn)者將不能完全或者正確的離開你的站點(diǎn)。
總是告訴用戶你的站點(diǎn)需要什么樣類型的技術(shù)才能正確瀏覽你的網(wǎng)站是一個(gè)非常愚笨的方法。如果訪問(wèn)者需要安裝插件才能處理，如果你僅僅給出一個(gè)連接讓訪問(wèn)者去下載。這個(gè)自認(rèn)為非�？岬捻�(yè)面對(duì)用戶來(lái)說(shuō)根本不是什么幽默的事情，這是和用戶的期待所恰恰相反的。至于為什么恰恰相反，希望你能反思一下，如果是你，你會(huì)為了瀏覽一個(gè)你根本不知道什么樣的站點(diǎn)而去下載一堆你不知道的插件么？
如何解決這個(gè)矛盾呢？你可能想到的解決方法有二種：一個(gè)是單純的文本，另外就是完全的圖形方式。其實(shí)不然。如果你使用一個(gè)圖形映射的方式給內(nèi)容列表，可以在該頁(yè)的后使用一個(gè)純文本方式的表格來(lái)處理，這樣會(huì)好很多。如果使用圖形按鈕，還是包括簡(jiǎn)單的導(dǎo)航文字提示。
大多數(shù)的時(shí)候，通常我們要養(yǎng)成使用"ALT"標(biāo)記的習(xí)慣，這樣當(dāng)圖形未能正確顯示的時(shí)候可用預(yù)備的文本替代顯示。這樣，用戶至少可以看到關(guān)于這個(gè)圖形的表述，便知道這個(gè)圖形究意味著什么。舉例來(lái)說(shuō)某個(gè)圖象標(biāo)記的預(yù)備文本就可以這樣寫：
使用"ALT"標(biāo)記也有另外一個(gè)好處。文字將顯示在圖象的上面，這樣會(huì)給用戶造成一個(gè)頁(yè)面快說(shuō)引導(dǎo)的感覺。
2、確定受眾。
一般的來(lái)說(shuō)，絕大多數(shù)普通受眾圖形，插件，applets和其它有關(guān)的高級(jí)Web瀏覽器特性。對(duì)我們來(lái)說(shuō)，頁(yè)面的實(shí)用可能比漂亮更重要，對(duì)于用戶來(lái)說(shuō)，沒(méi)有什么比頁(yè)面能夠快速下載更重要了，簡(jiǎn)而言之，精簡(jiǎn)你的站點(diǎn)，這是一條的捷徑。
波士頓一位圖形設(shè)計(jì)者兼美術(shù)講師說(shuō)："你必須考慮什么，這一切都應(yīng)該來(lái)自自于你的觀眾"！
為了讓每個(gè)人滿意，一個(gè)站點(diǎn)的實(shí)用比漂亮更加重要。并且首先，它必須能夠快速的被用戶端的較老版本的瀏覽器快速解釋。簡(jiǎn)化你的站點(diǎn)，然而，那未必是的辦法。
考慮一下站點(diǎn)訪問(wèn)者的操作系統(tǒng)，監(jiān)視器，瀏覽器，和的連接類型。然后，想想理論上他們需要從你的站點(diǎn)獲得什么？他們是想獲得連接還是需要實(shí)際的內(nèi)容？如果是普通的站點(diǎn)是否會(huì)失望，是否需要為瀏覽下載特別的插件。有一個(gè)竅門就是沒(méi)有必要為每一個(gè)人優(yōu)化你的站點(diǎn)，要滿足每一個(gè)訪問(wèn)者顯然不可能，你必須為訪問(wèn)者采取適當(dāng)?shù)募夹g(shù)。
3、保持頁(yè)面小巧。
這個(gè)小節(jié)我們談?wù)摰氖顷P(guān)于圖形的處理。的方法是我們呼吁廣大的讀者保持讓圖形文件的尺寸盡量的小。即使是那些僥幸擁有快速Internet連接的用戶，他們不會(huì)抱怨說(shuō)你的站點(diǎn)加載速度太快。
網(wǎng)站建設(shè)過(guò)程中的兼容性問(wèn)題怎么破？
眾所周知，網(wǎng)站在上線之前必須要經(jīng)歷一個(gè)大關(guān)：測(cè)試！而測(cè)試的前提除了各種bug修復(fù)和功能試用外，還有重要的一點(diǎn)：就是網(wǎng)站在多終端、多版本瀏覽器下的兼容性問(wèn)題。
進(jìn)入2017年，如果說(shuō)你的網(wǎng)站仍然停留在只是Google、百度等PC瀏覽器打開無(wú)異常，而換成其它版本的小眾瀏覽器打開不行或者bug頻出，那便不能算是一個(gè)合格的網(wǎng)站！移動(dòng)端也一樣，不管是iPad還是各種版本的手機(jī)端，都應(yīng)該能保證展現(xiàn)效果一致，且沒(méi)有其他結(jié)構(gòu)變動(dòng)等問(wèn)題。
可是，不得不說(shuō)的是，大多數(shù)網(wǎng)站在兼容性這方面做得并不是太好！因?yàn)榫W(wǎng)站各種特效的不斷創(chuàng)新和技術(shù)的更新迭代，導(dǎo)致一些老版本或特殊版本的IE等瀏覽器無(wú)法同時(shí)兼容同樣的一種或者多種特效！所以，我們的程序員必須要在保證主流瀏覽器能夠正常訪問(wèn)的基礎(chǔ)上，盡可能的針對(duì)每一個(gè)存在的瀏覽器版本進(jìn)行兼容性優(yōu)化！
