好的，身為一個前端工程師，聽說寫一篇抱怨 IE 的文章就是生涯階段的一個里程碑。以前一直不懂開發人員都討厭 IE，尤其聽到要支援 IE 就開始哇哇叫。對當時只是一名使用者的我而言，IE 只是比較臃腫、反應比較慢之外，並沒有感受到 IE 有那裡特別不一樣，無法感受到開發人員滿滿的幹意。現在我要帶著滿滿的幹意分享在開發時踩到 IE 的雷，希望可以好好整理一番，之後不要再踩到這些 IE 特別的地方。

在這之前，先分享一個網站can i use，在使用一個你覺得比較新穎的屬性之前，可以先到這個網站查詢，看看各個瀏覽器對你即將要使用的東西支援程度如何，可以提早知道狀況，避免踩到雷。

第一:div 區塊元素等高對齊

這個 case 是這樣的，左有各有一個顯示內容的 div，由於內容是用 ajax 撈回來的，所以沒有辦法確定內容的多寡，有可能很多也有可能很少。但是 PM 的要求是，不論兩個 div 內容多寡，一定要讓內容少的和內容多的等高，這樣視覺上看起來才會好看。這個需求聽起來非常合理，但是我的腦中一片空白，不知道要怎麼做，第一個想到的又是用 javascript 去計算兩個的高度強制複寫上去，不知道怎麼純粹只用 CSS 達成這樣的效果。後來我找到一篇文章讓 float 的 div 高度相同，裡面寫到用

-display:table
-display:table-row
-display:table-cell
類似將 div 以表格的方式呈現，讓 div 可以像 td 一樣，每一格都等高。這真是一個很棒很完美的解法，當我做出來的時候心裡這麼想。

但是過一陣子測試之後就悲劇了。IE 整個版面不是自適應一般向下流動，而是整個內容無線網右延伸，還沒有 scrollbar 可以移動看到右邊的內容，也就是說，大部分的內容無法也沒有辦法看到。

解決方法:

整個血淚的解決過程就不詳細說明了，解決辦法就是在最外層的地方使用 display:table 就好了，其他什麼都不要加也會有同樣的效果。理論上這樣應該不可能會等高，但是我不知道為什麼 chrome 和 IE 都吃這套，這依然是個謎。

第二:table 設定為 block，html5 內建的日期選擇器悲劇了

table 設定 block 的原因是因為，網站的表格裡面有很多很多資料要顯示，因此把 table 設定為 block，這樣才能給予表格寬度，表格的內容太多的時候，也能設定 overflow 的顯示方式，這一切聽起來都很正常是吧?沒錯這一切都很正常，發生異常的東西總是在你想不到的地方，也就是 html5 內建的日期選擇器。

<input type="date">

當點下去，會有一個日曆跳出來選擇日期時，就是那個日曆，日曆發生問題了。日曆的右邊會多出一條莫名的白邊，就只有右邊才有，左邊沒有。夠詭異了吧

解決方法:

研究之後發現，日期選擇器也是用 table 的方式呈現，所以不要直接去複寫 table 的設定，你要使用什麼 table 再使用 element+class 去指定複寫吧，不要更改全域設定

第三:用 svg 和 fontawsome 一起做 icon 選單

fontawsome 雖然提供很多 icon，但畢竟不是十足，有時候還是要用上自己做的 icon 上去，和 fontawsome 一起並排使用。

我用一個容器去包住圖片和說明文字，我的設定是高度給值，然後寬度是 auto。我給容器一個高度值，然後給 svg 一個同樣的高度值。顯示效果在 crhome 看起來非常好，非常正常。但是在 IE 卻會造成大跑版。

解決方法:

給 svg 高度值就好，不要給容器高度，這樣就 chrome 正常 IE 也正常了，然後我也無言了。