[TOC]
## 前言
前端面試中一般都會談到兼容問題,也希望你能講出一些常見的兼容問題以及解決方案。在你的日常工作中,你可能是谷歌瀏覽器開發好,然后各個瀏覽器分別查看,具體修復或者等測試反饋具體問題。而比較厲害的前端會在問題出現之前用一些常見的hack代碼來提前避免這些可能出現的問題。
那么怎么操作才是更好的方式?才能夠提高我們的工作效率?你不妨按照下面的思路去想一下
## 兼容問題的產生
想要解決這個問題,必須先分析兼容問題產生的原因。
* 代碼基本不考慮兼容或者無從下手,不知道哪些有兼容問題,更不知道即使有問題,這些部分該如何處理。
* 對各個瀏覽器的市場占比不清楚,對內核不清楚,瀏覽器對頁面的解析、渲染不清楚,不知道自己的重點工作,用戶需求是什么。
* 對兼容問題沒有系統的認識,無法對兼容出現的問題進行科學的分類
* 測試修復階段,沒有自己的思想,聽測試反饋,能改的都要改過來,不能改的就說改不了。
## 用戶體驗整體驗收標準
1. 無論在任何階段,都要在項目開發之前確認用戶群體以及最終的瀏覽器版本,包括最終的分辨率,了解清楚之后確認最終可接受的適配范圍,適配周期,無特殊情況按照公司的適配標準文檔出發。
2. 這個階段確定好之后,就可以有目的性的進行開發,避免不必要的兼容處理以及代碼分析。如果是谷歌等現代瀏覽器就可以大膽使用新css樣式以及酷炫的各種效果和插件,如果是ie等低版本,就要考慮基本功能可以實現的前提下,謹慎引入其他,確定可以實現的前提下再開發。
## 對瀏覽器的認知
瀏覽器的市場占比,前端的趨勢是適配哪些瀏覽器,哪些分辨率,各個瀏覽器的內核是什么?瀏覽器的兼容問題分類如下:
* 對基本樣式的解釋不同,解決辦法:標準文檔聲明,代碼規范,文檔渲染模式,樣式重置,針對當前瀏覽器版本寫hack,js腳本處理
* 對新樣式,新標簽不支持,解決辦法:兼容文件,廠商前綴腳本,替代效果
* 插件,復雜效果支持:查看不支持的具體原因,如能解決再使用,不能解決換能兼容的插件,或者放棄效果,用友好提示文本讓用戶換高級瀏覽器。
* 瀏覽器解析:分為渲染引擎和行為引擎,渲染引擎分為重繪和重排,頁面加載為同步隊列過程。而行為引擎集中在js處理上,建議使用高版本的jq,尤其部分方法,如果不支持用jq的工具方法嘗試,部分原聲的語法不支持的嘗試用新版的jq,目前統一用1.11.1。其中對頁面解析中,部分標簽現代瀏覽器會幫你把標簽補全,而低版本的ie是識別為錯誤的,導致樣式錯誤。另外,對于低版本的標簽和樣式要知道最終的解讀結果是什么。
## 代碼兼容
代碼做兼容,如上所述,在出現兼容問題之前,最好將兼容問題匯總,代碼中就解決這些問題。這里只對hack類的兼容代碼作分析。
* hack類的分為兩種:
1.針對瀏覽器版本做樣式修訂;
2.針對新樣式或者新標簽做修訂;
## 兼容思想--開發思想
1. 優雅降級
以高版本瀏覽器為基準,實現全部的效果,保證低版本瀏覽器基本功能可用。現代網站為主,用戶對ui以及功能要求較高,可忽略低版本的瀏覽器。
2. 漸進增強
以低版本瀏覽器為基準,保證全部效果可用,在高版本瀏覽器有更好的體驗。
常規網站為主,基本頁面為主,且用戶對這部分要求不高。
## 兼容問題分類
詳見兼容問題分類文檔
## 兼容解決方案
友情鏈接:
* [w3help常見兼容匯總](http://www.w3help.org/zh-cn/kb/)
* [csdn跨瀏覽器知識庫](http://subject.csdn.net/w3help/)
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi