IE8! the miserable monster
People still using IE8 to browse your website today.# IE8 的洗禮
最近實習接了一份需要向下相容到IE8的專案。原本以為問題不會太棘手，寫好整份前端版型與function後，到了 Microsoft 下載了虛擬機需要的檔案，打開之後開啟網頁…頓時陷入絕望。 因此特別寫了這篇簡易心得，紀錄一些筆者查詢過好用的script，希望給往後也踏上這條不歸路的同伴一些依靠…
#前言
這篇文章中已經記錄很多方便的套件，其中的四段是很多網站在
<head>會去匯入的，下面會解釋其中神奇的套件:
#1 IE8 認識新朋友
感謝
aFarkas的貢獻，用html5shiv讓IE8認識HTML5的世界。這是一段讓 IE6、IE7、IE8 支援 HTML5 標籤的 JavaScript。 記得要 include 在任何HTML5 tag 之前，不然預先讀到的tag，IE8還是不認識啊！
#2 RWD一下好嗎
現在每個人都有著手機，用手機瀏覽website的比例，已經超過全部瀏覽數的一半。儘管IE8不需要顯示mobile版本的畫面， 但是對於大螢幕還是需要做響應式的設計，筆者使用過
scottjehl提供的Respond.js，真的是解了心頭愁。 另外也附上css3-mediaqueries.js以及兩者之間在stackoverflow上討論的差異。
#3 我的小孩是誰？
大家在做 css 樣式時，可能會去針對特定元素做style control，例如
nth-child(2)、nth-child(odd)…等等。 利用selectivizr這個javascript，將可以繼續平常用的 CSS3 selectors。但是在效能上會大打折扣， 因為這個script其實會去做二次loading原本的style，使用上還是要注意保持網頁流暢性。
#4 背景圖你在哪裡
很多人會利用
background-size: cover來解決圖片比內容小時的問題，但是這件事在IE8上他並不懂，圖片只會赤裸裸的呈現在你眼前。 因為這樣 ，louisremi開發了一套 background polyfill！ 藉由在專案裡頭加入htc檔案，讓IE8也能支援這個方便的屬性。其原理是產生一個<img />並計算模擬出跟內容一樣大小的 background-image。 但畢竟，img 並非 background，background-position也無法用在style裡面。是美中不足的地方。
#5 console.log(“Fail”)
console是我每次在debug時會用的方式，但是在IE8使用上非常麻煩，若是沒有先開啟開發者工具(IE Dev Tools)，整個網頁會掛掉給你看， 筆者深受其害，發現這個問題的原因之後實在很悲傷， 可以養成習慣把 console.log 清乾淨，或是用下述的方式來繼續使用 console.log。下次，請一定要注意！
# 參考
這次的專案做起來實在費神，除了寫寫一般人看的前端，還要特別照顧IE browser user。令外，很多 Framework 特效以及style在IE8上也不再支援， 希望使用者可以盡快升級自己的瀏覽器，想想看，一台手機多貴都肯買了，瀏覽器免費升級應該是沒那麼困難吧！以下也附上一些連結，有興趣可以參考看看：
blog comments powered by Disqus