IE 6版面問題
2009/06/27
「這個mockup是我們這次UI改版的版型……@#%^&*」motorcycle咧~~~~暗!
每次聽到這句話，心中那股無名火又會熊熊燃起。改UI對我們真的是大的折磨，想到要讓layout在眾多的瀏覽器都能正常運作，真的就一個頭兩個大。各家瀏覽器對於HTML, scripting, CSS支援實作的方式都不盡相同，也造成原本應該是放諸四海皆準的統一規格，變的是四分五裂、四零八落、四不像的怪模樣。特別是IE 6，以其獨樹一格、獨一無二的實作方式，讓我為它的獨特性犧牲了許多無辜的青春歲月，因此，網路上有許許多多的活動來抵制這萬惡的根源(NO IE6)
面對這個棘手的問題，一般的解決方式有下列三種
- CSS Hack
這個方式應該是最簡單的，在不修改HTML頁面的條件下，針對破掉的版面分別設定相關的CSS設定。例如：IE 6的boxing model就是曾讓我很苦惱的問題@@，IE 6在設定元件的寬度時跟其他的瀏覽器是不一致的，導致版面常因此而破掉，所以要特地為此給定不同的CSS設定。要如何達到呢?只要在CSS設定前多加一個底線(_)就產生IE 6的專屬設定了。但是要記得寫在正常設定之後，也就是要覆寫它。
#css_selector
width: 100px; // 讓一般的瀏覽器來讀取的設定
_width: 90px; // 覆寫一般的設定，IE 6會讀取這個設定，其他的瀏覽器則會bypass
} - Conditional comments
這個方法則是針對會出問題的HTML元件，撰寫專屬的HTML碼 。要怎麼做到呢？可以參考這裡
<!--[if IE 6]>
放入專門給IE 6解讀的HTML
<![endif]-->
不要支援IE 6了
除了這個問題以外，在撰寫HTML頁面的時候也要注意DOCTYPE的設定，在HTML的最開始宣告DOCTYPE，告訴瀏覽器該用什麼模式來處理CSS, HTML, Scripting
一般而言，可以分成下列四種模式
- Quirk Mode
- Standard Mode
- Almost Standard Mode
- IE 7 Mode
詳細的說明可以參考這邊。不過基本上可以粗分成兩種類型Quirk mode, Non-quirk mode，所謂的Quirk mode就是告訴瀏覽器用舊的方式來render HTML, CSS等網頁元件，Non-quirk mode就是用符合現代規格的spec定義的方式來產生相關元件。至於如何在這些模式中切換可以參考下列表格(from: http://hsivonen.iki.fi/doctype/)
One Comment
leave one →
收錄來串文。^_^
聯合抵制IE6 請升級或更新瀏覽器
http://blog.joytown.tw/2009/07/31/531