IE6 Upgrade Notice

有過網頁設計經驗的人,無論是部落格樣版或是其他頁面,都一定有個共同的痛,就是IE6這傢伙對CSS的呈現總是跟別人不同,偏偏它的市占率一直是最高的。
通常解決這個問題的方法有兩種,一種是修改CSS直到版面看起來正常,另一種則是直接放棄,在網頁開頭就提醒使用者升級瀏覽器。
我們今天要介紹的就是最後一種方法,為什麼我們要放棄IE6呢?
因為網頁技術不斷的進步,不單單是CSS的問題,IE6本身還有其他原因,它已經不適合這個世代了,加上最近許多知名網站也紛紛開始提倡升級IE6,例如You Tube、Twitter和Facebook等,IE6你真的玩完了,拜託還在使用IE6的人,請你快點更換瀏覽器吧!!(小聲:換FirefoxChrome吧)



知名影音分享網站YouTube將停止對IE6的支援。



連最近在台灣火熱的Facebook都要封殺IE6了,還在使用它的人,麻煩你快點更新吧!!!



剛好之前看到一篇重灌狂人寫的文章 "在網站加入警告標語,建議IE 6.0的使用者升級",裡面介紹了一些IE瀏覽器版本判斷的語法,可以分辨出使用者目前的IE瀏覽器是哪一個版本。

例如我要讓IE6以下的使用者看見提示的話:

   1: <!--[if lte IE 6]>
   2: 這裡的內容只有IE6以下的使用者才看的見。
   3: <![endif]-->

只要將提示內容放在<!--[if lte IE 6]><![endif]-->之中,就可以讓還在用IE6的人,看到你要傳達給他的訊息了。

語法說明:

   1: <!--[if IE]>
   2: 使用IE瀏覽器全部版本的人都看得見這裡的內容。
   3: <![endif]-->
   1: <!--[if IE 6]>
   2: 只有IE6的使用者才能看見這裡的內容
   3: <![endif]-->
   1: <!--[if lt IE 6]>
   2: 這裡是小於IE6的版本使用者才能看到,不含IE6。
   3: <![endif]-->
   1: <!--[if lte IE 6]>
   2: IE6以下版本的使用者能看見內容,包含IE6。
   3: <![endif]-->
   1: <!--[if gt IE 6]>
   2: 這樣IE6以上版本的使用者會看見內容,但不包含IE6。
   3: <![endif]--> 
   1: <!--[if gte IE 6]>
   2: IE6以上版本的使用者能看見內容,包含IE6。
   3: <![endif]-->

上面的版本編號也可以換,如果把[if lte IE 6]換成[if lte IE 7]的話,就是IE7以下使用者能看見內容。
  • gt:greater than (版本大於)
  • lt:less than (版本小於)
  • gte:greater than or equal (版本大於等於)
  • lte:less than or equal (版本小於等於)
最後分享一個自己寫的範本,加了jquery的sideup效果,有興趣的可以下載回去參考看看。



演示範例:
範本下載:
參考資料:

這個網誌中的熱門文章

DevOps:持續整合&持續交付(Docker、CircleCI、AWS)

Factory pattern 工廠模式

如何優雅地在 Mac 上使用 dotfiles?