IE 議題

前陣子與到各種 IE 問題真的有夠痛苦，實在不理解為什麼都 2019 年了還要支援到 IE9？IE11 就算了，IE9 欸？？IE 有多少使用量不就 GA 報表一看就知道了嗎？

主事 PM 不理解 RD 處理 IE 9 的時間都能做其他新功能了，哀抱怨歸抱怨，這裡紀錄一下遇到的問題：

問題：HTML 5 的 input placeholder 這個 屬性 attribute，要在 IE10 才支援

解決：在與 PO 討論後、請資深 RD 與 PO 討論後，請 RD Leader 再和 PO 討論後....決定不用支援 IE9 的輸入框 placeholder。

因為 placeholder 只是能幫助 UX 的提示文字 不影響主要功能操作的執行

問題：剛升版後遇到的錯誤，在React class 內寫 static defaultProps 出錯

static defaultProps = { xxx: ooo }

解決1：改在 class 物件外面寫 defaultProps

xxx.defaultProps = {...}

解決2：升級 babel

問題： 註冊頁表單提示訊息在IE9 會變成使用的 jQuery validation 原文英文，而不是後來另寫的 jQuery validation 自訂JS的中文提示訊息。

我們驗證訊息有用到 jQuery validation 原始 JS Library，和另外以此寫了一包 JS Library 兩個檔案，另外寫的 JS Library 都是 jQuery validation 的擴充自定義 Methods。

解決：移動這兩個 .js 在該頁 .NET Bubdel 進去的位置就好了 (從header內移到 body內)，還有檔案順序 先載入 jquery validation 套件，再載入公司自定義的擴充 JS Library 就好了，當初這個問題解到半夜11點..還是主管遠端解完的。

問題：IE9 圖片上傳即時預覽很難寫

圖片上傳後即時預覽用 File API 就可以處理，但 File API 必須要到 IE10 才支援。

這裡的 File API 不是指 input type="file"，因為input type="file" IE9 有支援，也可以上傳圖片，但就只能上傳這樣，想預覽要另外想辦法。

用 babel 可以解嗎? 不行! 因為 File API 是瀏覽器原生 API ，並不是我們撰寫的 JavaScript。

解法1：開啟 ActiveX ，可以透過一些 API 完成預覽....但..。
但.. ActiveX 因為安全性早被預設關閉，加上現在 QA 測 IE9 也是在 IE11 開發者工具模擬的 IE9，不是真正的 IE9。
而 IE11 就預設關閉 ActiveX 要開啟還要去 設定>安全性調整，非常之麻煩也不合真實情境。

PO ： 那當時IE9還在是怎麼支援圖片上傳的一些功能的?

解法2： Flash
在IE9 盛行的年代，即是 Flash 盛行的年代，當年沒有什麼是 Flash 做不到的，就連線在上網找 File API 的 polyfill，也是用 Flash 去做的。

因為 File API 是 HTML5 瀏覽器 API ，不是幾個 ES5 JS語法就很好解決的東西，但類似的功能 Flash 可以做到，總之當初 IE9 時代 大家就都是用 Flash 在做的啦！！

解法3： 圖片濾鏡

這是比較有可能的合理解法，本地上傳圖片後取得圖片路徑，然後塞給 CSS 濾鏡呈現，但用 CSS3 濾鏡沒辦法，IE9 必須用以下寫法：

filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='圖片路徑')";

這是舊版 IE CSS 濾鏡的寫法，幹初次看到真的不知道再寫三小！

最終解決：Sprint 時間不夠開發，與 PO 討論後 決定暫時不支援 IE9 圖片上傳即時預覽 (灑花)。

問題：IE10 input type="file" 某些區位要點擊兩下才可以開啟上傳圖片圖片的視窗

JQ解法

if (navigator.userAgent.indexOf("MSIE 10") > 0) {
  $("按鈕ID").mousedown(function() {
    $(this).trigger('click');
  })
}