Browser相容性技巧筆記
IE 7 已經出了，過不久 security update 就會自動強制更新... browser 間的相容問題又多了一個新的變數，這下我們這些 web developer/designer 有得受了。下面整理了一些處理相容性的技巧：
清除 browser 的預設狀態，讓所有的 browser 的起跑點一致
Yahoo UI Library 裡有一個 reset css 的工 具，它可以將所有 tag 的margin/padding/border/font szie... 等所有狀態全部清除。將這個 reset.css 放在 網頁的第一行，優先執行即可。這個算是最基本，也是最重要的第一件事。網站一開始開發時就該採用。
用 css class 選擇 browser - CSS Brower Selector
對付 IE 這個怪獸，應該不少人用過什麼 * hack 或是 > hack 奇奇怪怪的招式吧？這些 hack 在 IE7 下通通失效了，而 IE7 本身也有了新的 hack 方式，哇咧！這樣下去沒完沒了啊！ CSS browser selector是我看過最棒的 solution。只消用 .ie, .gekco, .ie6 .safari 等 css class 就能選定不同 browser，即簡單又清楚。 它的運作原理是一開始用 javascript 替 <html> 這個最上層的 tag 加上 class，比方說在 linux 上 的 firefox，就會產生: class="gecko linux js"。非常漂亮的作法~，它產生的 class 是用 regular expression 去寫的，所以直接支援 .ie7 , 而未來若有 .ie8, .ie9 也沒有問題！
IE 的 Conditional comment
這沒啥好說的吧... 通常用在 include 不同的 css, javascript file 上。一併整理如下：
IE 的 Conditional compilation
跟上面的類同，但可在 javascript 裡用：
06'12/17 Update: 修正偵測非 IE browser 的 conditional comment，謝謝網友 chenkaie 的指正。
I have added this to my hemidemi bookmark list :) thx for your grest sharing and I do love this grest article.
http://www.hemidemi.com/bookmark/info/301553
由...發表 drakeguan on 十月 25, 2006 at 10:58 上午 CST #
感謝 hemi~
希望大家也分享一些技巧的啦... 我不是 web designer，只能挖一些料而已...
由...發表 ingramchen on 十月 25, 2006 at 11:32 上午 CST #
Hi:
我實驗過之後，底下這段語法似乎有點問題...
# <!--[if !IE]><!-- -->
# IE 4 或 其他 browser
# <!-- <![endif]-->
應該要改成底下這樣子才對
# <!--[if !IE]> -->
# IE 4 或 其他 browser
# <!-- <![endif]-->
有錯的話，請訂正...我是用Firefox 2.0 and IE 6 環境下測試的
由...發表 chenkaie on 十二月 17, 2006 at 09:31 上午 CST #
我上面寫錯了，謝謝訂正。
已經修正好了！
由...發表 ingramchen on 十二月 17, 2006 at 11:04 上午 CST #