[Notes] Something you must know when fighting with IE7

Image Credit

全世界 Browsers 的使用率 (July 2012 ~ July 2013)

最近剛好有一些實戰機會可以和 IE7 來奮鬥,身為 FED 卻一直 skip 掉 IE7 好像不太好,有種沒有實戰過的感覺 xD … 現在想要把一些小細節記下來,希望能幫到想要和 IE7 奮戰的隊友們 xDD

δ 前情提要,如果是要解 IE6 的話 … 我只能請你自求多福。不過至少你能先叫做這個決定的豬腦去看一下微軟官方做的網站 IE6 Countdown,如果他發現自己做錯事的話,說不定問題就迎刃而解了呢 hahah。

奮戰流程:

  1. 如果你的作業系統不是 Windows 的話 (就算是 Windows 也是可以),那真的要先感謝一下佛心微軟放出來的 modern.IE ,因為你可以在上面找到各個作業系統上,各個虛擬化平台上內建好各個 IE 版本的虛擬硬碟。你就不用只為了測 IE 再來個什麼雙系統、三系統了,掛個 VirtualBox 就可以省下很多空間還有時間。( 因為我是用 128GB 的 SSD,所以空間有限,我個人的作法是把虛擬硬碟全部丟去行動硬碟上面,跑的很順也省下很多空間,可以參考一下)
  2. 在 fight with IE7 之前,先把戰力放在 Modern browsers。我特別去網路上找有關 browser 市佔率的各種資料,而資料整體上都是呈現出如本文一開始那張長條圖一樣的分佈。所以切記,時間就是金錢,特別是如果整個團隊就只有你這位 FED 的話,真的要先把事情都搞定後,再來打 Boss 呀。
  3. 終於要打 Boss 怪了,FED 們都知道(只有你家的 Boss 不知道) IE7 最強的攻擊技就是「完全沒有 Developer Tool」,這招真的強到讓人完全沒有還擊能力,因為通常 IE7 最大的問題就是 Layout 的不一致,尤其是對 IE7 完全沒有經驗的人來說特別如此,所以總是會很頻繁的手動調整 Layout。不過我找了一陣子後發現其實微軟有開發自己的 Developer Tool 給 IE7,只是並沒有內建在 IE7 裡面,而是需要自己手動下載來安裝,所以切記一定要先把你的 IE7 裝上 Developer Tool 呀。
  4. Let’s fight !!
  5. 特別開一個 IE7 fix,然後透過 Conditional Comments 來引入相關的 CSS / JS 檔案,這樣可以讓你原本的程式碼抽離於這些 hack 之外(我真的認為這些都是 dirty hack),所以不要 pollute 太多東西進去原本的 CSS / JS,這會造成維護上的困難也沒必要。
  6. 如果你使用到一些 CSS3 的東西像是 border-radius 或是 box-shadow 之類的屬性,記得搭配 CSS3Pie 來服用,通常可以解掉 90% 以上的 CSS3 問題,雖然好用但是要記得一些小事,就是有一些屬性只支援 shorthand version,請自行查閱一下 document 別寫得太開心到最後 Pie 看不懂就囧了。
  7. 通常 IE7 Layout 最大的問題是發生在 hasLayout 這個屬性上,根據 Sitepoint 這篇文章的解釋, 可以了解到這個是 IE 賦與元素的一個內部屬性,它的用處是「讓該元素本身及其孫元素(descendant)具有處理定位 (Positioning)及大小(sizing)的能力,而不是依賴於它的祖元素們(ancestors)」。而該文有列出幾個元素像是 img … 等。那為什麼會和這個屬性有關係?因為除了 IE 預設清單內的元素們具有這個屬性外,其他的元素是沒有這個屬性的,文章內有提到幾個常見的現象,像是「元素部分內容存在但是部分卻消失」或是「畫面只出現一半」。而要從 CSS 讓元素強制具有這個屬性有許多做法,最常見的做法就是設定一個 zoom: 1; 就可以了,這就是為什麼我們很常看到很多 3rd party libraries 在 CSS 中會加入這個東西的原因。不過這背後還有很多細節及一些奇特情況,可以參考微軟的這篇
  8. 如果你有使用 font-awesome 的話,請記得加入 font-awesome-ie7.min.css 的 hack,你會發現他都是在利用 zoom: 1; 來解 hasLayout,還有加入 innerHTML workaround 來解 IE7 不支援 pseudo element selector 的問題 xDDD
  9. 如果你有使用 bootstrap 的話(我是用 2.3),我發現如果用組合式 grid 來達成滿版的話(我這邊碰到的情況是 span6 + span6 或是 span4 + span8),整個 Layout 就會炸掉,所以要特別手動調整 width ,這邊要特別留意一下。
  10. 利用 zoom: 1;*display: inline; 來解原本被我們套用 display: inline-block; 的元素們(在 Modern browsers 我們用太習慣了,所以這個問題很多)。
  11. 如果你有用 <ul><li> 的話,不要用 list-style-image 來客製化他的樣式,因為如果有 position 上的需求,並沒有 CSS 可以直接控制這個值,可能會調到死,取而代之的你可以改用 background-imagebackground-position 搭配 padding 來手動 position,效果佳。
  12. … 未完待續

以上是和 IE7 奮鬥過的一些心路歷程,希望能幫到一些人,未來如果還有什麼有趣的狀況也會更新在這個清單內,Rock 😛