怎樣可以很好地保證網頁的瀏覽器兼容性？

01-03

最近發現越來越多的網站在ie和火狐以及chrome下面的顯示各有差異，比如知乎在不同瀏覽器下的顯示及功能就不一樣，怎樣可以很好地保證網頁的瀏覽器兼容性？

其實我特別不願意看到這樣的問題。保證瀏覽器的兼容性是一個落後的話題，先看一組豆瓣數據，各瀏覽器的佔有率：

ie6 - 30.23%

ie7 - 4.8%

ie8 - 30.6%

ie9 &< 1%

chrome - 13.99%

firefox - 7.17%

safari ~ 5%

其他 ~ 8%

我們認為chrome + firefox + safari + ie9是高端瀏覽器，ie8勉強算準高端吧。這樣這部分佔有率約57%(如果加上其他webkit內核的瀏覽器會更高一些) 已經大於ie6 + ie7。

高端和低端瀏覽器的差距可以用html5test量化一下：

Google Chromium 11.0.690的分數是293，而Microsoft Internet Explorer 6.0的分數17

也許有各種fallback方案可以保證完全兼容性各個瀏覽器，但依然不能保證低端瀏覽器的使用體驗，頂多是看起來各個瀏覽器都一樣了。因此，現在的設計和開發的策略是瀏覽器分級支持。優先為高端瀏覽器設計，同時考慮低端瀏覽器的退化方案。甚至有些複雜的應用可以拒絕ie6，提示用戶使用高端瀏覽器。豆瓣7月份將會發布一款對ie6說no的產品（國內第一個拒絕支持ie6的產品吧）

因此不要再考慮向後兼容，應該考慮向後退化，更多考慮向前兼容。

跨瀏覽器開發應該使用的一些經驗

1)一些關於跨瀏覽器/設備的工具

1. modernizr.js 特性檢測器，有就使用原生，沒有就載入polyfill

2. polyfill/shim 向後兼容的瀏覽器的js補丁，一般和modernizr一起用

3. jshint.js js語法檢測器

4. Boilerplate 開發的最佳實踐的初始模板

5. 閱讀第三方庫關於最低版本支持

6. 使用js單元測試，測試目標瀏覽器

7. Responsive Design （針對屏幕大小）

8. normalize.css 統一瀏覽器基本元素的風格

2) 一個策略：

另外，我一直說的一個策略：把瀏覽器分兩類，一類是歷史遺留瀏覽器，一類是現代瀏覽器，然後根據這個分類開發兩個版本的網站，然後自己定義那些瀏覽器是歷史遺留版本，凡是歷史遺留版本瀏覽器，統統使用歷史遺留版界面，然後通過通告欄（信息通知系統）明確告知本版本有些功能不能使用，儘快轉移到現代瀏覽器上。然後現代瀏覽器的網站版本，功能全開，提供最好的用戶體驗。

3)最後手段：

最後方案，就是直接使用jReject.js這類插件，彈出有全黑蒙板的對話框，告訴用戶這個網站什麼版本的IE/瀏覽器不能用，請使用至少什麼版本的IE，firefox和chrome.(這個是最後手段，以上方案都失效的情況下使用。)

4)一個提醒：

跨瀏覽器兼容問題，過去有，現在有，以後會更麻煩，所以這個問題在你的項目開始前，就必須確定下來最低支持的版本是什麼，然後設計一個對應兼容方案。

不要等開發完畢了，才告知要必須兼容個ie6啥的，那你的項目就有得好改了。

5)面向未來：

2015年es6就要正式完成了，等es6出來後，如何把es6的javascript向後兼容呢？這裡我有個概念，還沒實驗過：

1.使用es6編譯器把代碼導出成es5代碼

2.使用modernzr檢查瀏覽器是否支持es6，支持用es6代碼；不支持，用編譯好的es5代碼並且載入es6shim。

3.使用grunt把es6編譯過程完全自動化

以上這個方案，應該可以使用es6代碼去兼容所有的瀏覽器了。

這個問題對於Web開發者來說真是頭疼的問題，我從事Web開發也有兩年時間，期間遇到過許許多多類似的問題，每次都被搞得很累，後來畫了大半年時間專門研究Web前端技巧，最後我總結了一些方案出來：

1.在開發Web APP的時候，開發機上面最好把主流瀏覽器都裝上，比如說：Chrome、FF、safari、IE、IE Tester... 在大多數情況下，FF和Chrome差別不是很大。

2.開發過程中要注意，每做好一個樣式，都要跑一遍所有要兼容的瀏覽器，這樣雖然開發過程時間會比較長，可是會比你開發完成後再來改效率高得多，我曾經就碰到過一個產品，開發完成後由於兼容性問題導致其發展面很窄，最後不得不重新開發。

3.如果真的碰到樣式不兼容的情況，那麼只能針對不同的瀏覽器做相應的調整。

4.一些新的特效可能在一些版本落後的瀏覽器里不兼容，這個時候我們的原則就是：不求效果絢麗，只求工整規範 o(∩_∩)o

5.多積累，多看看符合W3C標準規範的CSS手冊和JS手冊，注意積累，或者用一些開源框架，那樣兼容性可以省下不少時間

以上都是個人見解，可能有的地方說得不對，還請知乎的牛人們指正!

盡量使用標準的網頁布局方式，也就是符合W3C的布局，再加上css的使用也符合W3C的使用，這樣完成一個頁面下來，其實很少有地方需要你針對特定的瀏覽器進行兼容性修正。做過比較多的頁面，又複雜也有簡單的，大多時候，一個頁面下來，其實只有兩三個地方需要進行大的兼容性調整。

psd轉html時，需按照W3C標準流程和規範製作，用基於標準的瀏覽器測試，推薦firefox,chrome

這樣基本上，firefox,chrome,safari,opera,IE9都能表現一致

然後再針對IE8、7、6進行修改

你說的差異是由於不同企業的觀念導致。現在越來越流行「優雅退化」，特別是IT行業的網站。優雅退化差別與傳統觀念在於不保證所有瀏覽器的表現均一致，在更符合w3c標準的瀏覽器中表現良好，在舊瀏覽器中表現沒那麼好但不影響正常操作（例如知乎按鈕的圓角效果）。

保證瀏覽器的兼容性更多需要靠經驗，經驗讓你對CSS的根源有更深的認識，所以你實現兼容性不是靠hack，而是靠各種屬性原本的實現再進行互補。對CSS從「how」到"why"，估計就OK了。

總之這事做多了就可以了。（js那邊通常用框架開發，框架本身已經隱藏了瀏覽器兼容）

我們都是採用預先監測瀏覽器的種類及版本，然後選擇載入不同樣式的不同的CSS文件，這樣就能保證該網頁在不同瀏覽器下的顯示問題。

構思整體和局部的實現時候就要考慮很多東西了，比如兼容性，製作成本，維護成本等等，而這恰恰是大量實際經驗中不斷學習而來的能力。吃過的苦頭，爭取下次不要再吃，沒碰到過問題，沒棘手過是不會有提高的。多多實踐吧。

咳咳：知乎專欄

看看這篇文章！

上面的大家都說了，要漸進增強，所以要人為的製造差異，這樣才能促進用戶升級瀏覽器

然後做的時候，先要CSS REST，然後在你遇到問題最多的瀏覽器上做首次開發（這樣在首次開發時就能解決掉最多的問題，比如IE……），然後再針對不用的瀏覽器寫HACK了（這時就要把漸進增強引入了……）

各位大神，我最近寫了一個靜態網頁，就出現了兼容性的問題，由於是第一次編寫網頁，所以不知道怎麼去解決這個問題，想用hack代碼去解決這個，但又不知道從哪下手，請求各位大神指點指點，不慎感謝~~

不得不考慮網站本身的用戶群。像百姓網這類的分類信息網站，IE6在50%以上，反而firefox在1%都不到，設計時如果不考慮IE6，問題會非常的大。

我想，保證產品的可用是底線，瀏覽器的兼容性方面可以通過避開一些不統一的寫法等盡量保證效果統一，一些瀏覽器的特性，在現階段只能說是錦上添花的東西。

在保證產品可用性的情況下,作些漸進增強,不必去追求表現層的一致性

全Flash，確保瀏覽器兼容。

請權且把這個當作玩笑～

真實的情況是，你可以通過一些成熟的手段去兼容90%的瀏覽器體驗，儘管顯示上略有差別，但至少不會走樣。剩下的那10%就放棄吧，或者等待他們學會使用更好的瀏覽器。

規範的，良好書寫習慣的代碼寫出的東西基本不需要太多兼容性的問題，一些兼容性的問題基本上都是可以避免的

強悍的框架，還有耐心的調試少用hack