前端技術如火如荼的狀況下瀏覽器兼容如何考慮

時間 2019-11-19

原文原文鏈接

談到兼容問題，主要指的是IE瀏覽器隨着ECMAScript5/6和h5,css3的普及，愈來愈多框架、庫再也不支持老舊（如IE9如下）瀏覽器。css

先來看下2017.1-2017.6 各瀏覽器版本份額（數據來源：http://tongji.baidu.com/data/browser） html

meta設置 <meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
在樣式表裏添加hack的行爲過於碎片化
ieBetter.js-讓IE6-IE8擁有IE9+,Chrome等瀏覽器特性
Respond.js-讓IE8識別Media Query ;
css-pie 讓IE8支持css3部分特性
html5shiv 讓IE識別h5新標籤（nav, header等）

給html添加條件註釋html5

<!--[if lte IE 6 ]><html class="ie ie6 lte_ie7 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7 lte_ie7 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="zh-CN"> <!--<![endif]-->

把ie補丁都寫在個專門的fixie.css裏。這樣樣式文件乾淨看着不心煩。jquery

若是不考慮低版本IE ，能夠插段代碼，提示使用老舊瀏覽器的用戶升級。好比jquery插件的有:iealert.js，固然也可本身寫js來判斷css3