處理相容問題的思路:
1、要不要做?
1 ) 產品的角度(產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先)。
2 ) 成本的角度 (有無必要做某件事)。
2、做到什麼程度?
1 ) 讓哪些瀏覽器支援哪些效果。
3、如何做?
1 )根據相容需求選擇技術框架/庫(如jquery 1.x.x)
2 )根據相容需求選擇相容工具:html5shiv、respond.js、css reset、normalize.css、modernizr.js、 postcss.
3 )條件注釋、css hack、js 能力檢測做一些修補
漸進增強和優雅降級
1 )漸進增強(progressive enhancement): 針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。
2 )優雅降級(graceful degradation): 一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容。
示例:
lang
="en"
>
>
charset
="utf-8"
>
>
相容性**title
>
>
var eventutil =
else
if(el.attachevent)
else},
// 2.事件解綁
unbind:
function
(el,type,handle)
else
if(el.detachevent)
else},
// 3.事件物件
getevent:
function
(event)
,// 4.事件目標
gettarget:
function
(event)
,// 5.停止冒泡
stopprop:
function
(event)
else},
// 6.阻止預設
preventdef:
function
(event)
else}}
; window.
onload
=function()
);}script
>
head
>
>
>
hellodiv
>
body
>
html
>
瀏覽器相容性
瀏覽器相容性是乙個很長久的話題,之所以前端需要面對瀏覽器相容性,是因為使用者的環境有不同的平台,不同的瀏覽器。不同的廠商之間為了相互競爭,對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本,不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...
瀏覽器相容性
所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...
瀏覽器相容性
trident ie核心 gecko firefox 核心 webkit chrome,safari blink webkit 的分支 presto 是挪威產瀏覽器 opera 的 前任 核心,為何說是 前任 因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營。移動端的瀏覽器核心主要說...