如何解決css3在老版本IE(IE9及以前)下的兼容性?
之前一直在國外,現在回國想做一些開發工作,但是不了解國內瀏覽器市場份額的情況。查過資料後發現IE6到IE9這些在國外基本已經被淘汰的瀏覽器在國內似乎還佔有至少30%的市場份額(各方面數據不統一,請指正)。那麼在國內做網頁開發的時候如何兼顧到這些老版本的兼容性問題呢?或者說是否應該遷就IE用戶而放棄使用很大一部分CSS3的特性?
兼容個毛。。。用戶就是被慣的,你越兼容他越不思進取,到最後就得永遠兼容下去。你不兼容逼他換瀏覽器,新標準才有實質性意義。
現在只要一個公司跟你提兼容ie8(ie8確實還有不少)以下的瀏覽器,那就是在耍你,鑒定完畢
老夫做的項目一般情況下直接做瀏覽器判斷,IE10以下操作系統直接跳轉微軟的新版IE下載地址。別提XP不支持。連和Win7都用不起的Low貨真心沒必要和他們談業務。
IE10都應該拋棄,不要管什麼IE6了,你們不是這麼不喜歡IE6嗎,那就不要去兼容它啊,男子漢大丈夫,要說到做到。
一個國內比較知名的互聯網公司項目,只要是IE8以下版本的瀏覽器訪問,直接跳轉到一個頁面。這個頁面就是要麼升級瀏覽器(這個頁面展示出升級瀏覽器的鏈接,直接升級),要麼下載現代瀏覽器(提供直接下載鏈接),不然就沒法訪問。這樣的做法可以很方便的給一些老年用戶或者不熟悉互聯網的人升級瀏覽器,因為對一些小白用戶來說,IE特么的要升級還真不是個簡單的事。這種做法非常不錯,做什麼兼容,國內這麼多低版本的IE瀏覽器存在,都是被慣的。要我的做法就是你都要用這麼low瀏覽器,就直接看沒有樣式的網站得了,上什麼網,要什麼用戶體驗,就這品味,這審美。。真心捉急,估計也沒啥好合作的業務。
根據目前瀏覽器統計情況來看,IE8用戶比例仍然在20%以上,IE8以下從我們自己的項目統計來看比例非常低,只有3%以內或者更少,因此放棄兼容。
所以我們目前只是對IE8做了有限兼容(布局正常),具體方案如下:先按HTML5和CSS3的標準做好,在chrome下測試正常,然後通過條件注釋給IE8單獨一個CSS文件,通過CSS規則覆蓋修補布局的錯位。
因為IE9以下的瀏覽器不支持HTML5標籤,所以需要導入一個html5.js補丁,原理是通過JS來生成HTML5新標籤對象。
因為本著移動優先的原則,現在寫CSS都會用media query(響應式設計),IE8以下的瀏覽器不支持media query,這會導致@media 聲明的CSS不能生效,因此要導入一個css3-mediaqueries.js補丁。
如下:
&
&
&
&
&
/* 因為條件注釋只對IE10以下版本有效(IE11已經取消支持),所以在其他現代瀏覽器裡面會自動忽略,不會載入,因此不會有性能問題 */
/* 因為IE9以下瀏覽器不支持CSS3,IE9支持一部分,因此不能顯示一些CSS3的過渡效果,對此有兩種辦法,一種是忽略,也就是降級或者是差異化設計。
或者可以用jquery的動畫替代,引入方法可以是條件注釋,也可以通過檢測Navigator來判斷IE版本 */
最後再補充幾句:IE9,甚至IE10或者11在CSS上的表現有時候也不能和Chrome或者Chromium內核這樣的標準瀏覽器一致,比如我遇到過IE字體渲染導致的行高不一致,這種時候都可以用條件注釋解決,IE11不支持條件注釋,可以用正則表達式判斷,比如下面這段代碼是判斷全部IE版本var browser = navigator.appName;
var ie11 = !!navigator.userAgent.match(/Trident/7./);
if (browser == "Microsoft Internet Explorer" || ie11 == true) {
//do something
}
如果沒有特殊要求,一般都只兼容到ie10。ie10以下的用戶?抱歉,你們這幫low咖不是目標用戶。凸^-^凸
我媽一大把年紀了,第一次用完瀏覽器,都說:這個(IE)不好用,沒有這個(Chrome)好用。。。
以前沒有CSS3的時候你沒開發過嗎?
如果是CSS的話我理解就是麻煩點,而且為了性能適量減少一些背景圖的質量就是了。國外如果IE9-的比重低到10%或以下,你們難道就不兼容了嗎?--補充以下,我覺得IE9-不能一刀切。是不是可以嘗試老版本瀏覽器給予較差的背景圖,以及較少的動態效果。然後善意提醒為獲得更好的體驗,建議升級瀏覽器。然而大家瀟洒答完題後乖乖地去寫css了。
還好,我做移動端
不一定要完全一模一樣,能用就行了
IE10和IE11的界面都是為win8設計的,而win8則是為觸屏電腦設計的,不是為PC設計的。這兩個瀏覽器的滾動條和控制項在win7下難看的要死。這就是為什麼我的網站要兼容IE9和IE8。
只能不用。。。。。蛋疼的用javascript寫animate。。。。
降級 ,不用css3的特性
推薦閱讀:
※有大公司 offer 卻選擇了小公司是為什麼?
※北郵通信工程和計科怎麼選擇?
※身處網路時代,當個人帳號密碼太多的話,如何安全有條理的保管?
※為什麼蘋果公司可以持續創新?
※互聯網社交的目的到底是什麼?