19 October 2006

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 上。一併整理如下:

<!--[if IE]>
   所有 IE browser
<![endif]-->
<!--[if IE 6]>
  IE 6
<![endif]-->
<!--[if IE 7]>
  IE 7
<![endif]-->
<!--[if lt IE 7]>
  IE 6 以下 (含)
<![endif]-->
<!--[if !IE]>-->
IE 4 或 其他 browser
<!-- <![endif]-->

IE 的 Conditional compilation

跟上面的類同,但可在 javascript 裡用:

/*@cc_on @*/
/*@if (@_jscript_version >= 5.7)
	// IE7 或以後

  @elif (@_jscript_version >= 5.6)
	// IE6

  @elif (@_jscript_version >= 5.2)
	// IE5.5

  @elif (@_jscript_version >= 5)
	// IE5

  @else @*/

    // 其他 browser,例如 Firefox, safari, IE 4.x 等

  /*@end
@*/

06'12/17 Update: 修正偵測非 IE browser 的 conditional comment,謝謝網友 chenkaie 的指正。