加個瀏覽器建議升級提示,跟IE6說掰掰!(If IE 語法)

每次網站改版,總是會猶豫要不要對IE6進行校正,因為這個已經超過10年前的瀏覽器,到現在還有使用者依依不捨,不捨的原因大多是因為他就是系統內建的,因為要求使用者去轉換使用平台或軟體,是一件非常麻煩的事情,他們可能認為本來好好的,為什麼要轉換呢?就算跟他說新版瀏覽器有多好,他還是會問你一句,我現在這樣就夠用了…。(整個說不過Orz)

既然用講的他們不願意換,那我們就在網上加個建議提示,或者是讓網站直接不對IE6校正,如果他們真的需要更好的體驗,就會自行更換瀏覽器。那我們該怎樣加入建議提示呢?如果跟一般正常內容一同加入,這樣不是所有人都會看到,包括那些使用最新版的瀏覽器之使用這,這不是很怪嗎?不用擔心,有一個If IE的語法,可以讓特定版本的IE才可以顯示特定內容,很方便的。


首先,我們來還念一下IE6是什麼東西好了,可能很多人已經幾百年沒有聽到這個名稱了。IE6就是那一個藍色的e字,出現在桌面上的東西,點兩下就會開啟Yahoo奇摩首頁,這就叫做上網了。讓我們先看看那個懷念的e字,因為新版都換了,所以非常值得小小紀念一下的。可怕的IE6.....
接著,我們再懷念一下瀏覽器的說明,天啊!這個畫面多久沒看看到了…(香腸都看Chrome的XD)

加個瀏覽器建議升級提示,跟IE6說掰掰!(If IE 語法)

最後,讓我們來瞧瞧所謂的上網,就是這樣子!首頁就是Yahoo奇摩,台灣最大的入口網站。曾幾何時,香腸也是這樣的過來人(羞)。以前老師都會要我們註冊Yahoo信箱,因為學校當時並沒有提供學生信箱可以使用。以前曾經學生上電腦課都一定登入Yahoo信箱,到最後學校直接封鎖了Yahoo信箱登入。現在,學校總是喜歡封鎖Facebook…XDD。

加個瀏覽器建議升級提示,跟IE6說掰掰!(If IE 語法)

既然,我們懷念完了。進入主題,該怎麼對IE瀏覽器下特定的判斷式,只限IE才可以看到瀏覽器的升級提示呢?首先,我們需要修改網頁程式碼,而這個判斷式,他並不是什麼特別語言的語法,而是最最最一般的HTML判斷式,非IE系列的瀏覽器,會自動跳過這一段語法,並不會將語法內的東西載入,大家可以大大的放心,跳過就是不會執行,也就不會載入額外的東西,網站速度不受影響。(不過如果下錯判斷是那可就不一定了…)

加入IE判斷語法到網站中

以香腸的WordPress的作法,我會將以下語法加入到hreader.php內,在選單的下方。當然每個人的網站架構不相同,所以各位要自己判斷一下位置,再進行加入的動作,加錯可能會讓版位跑得更誇張唷XD。

<!--[if lte IE 6]>
 <div id="noie6">
    很抱歉,目前本站瀏覽不支援IE6以下的瀏覽器,若看見版面跑掉,純屬正常狀況。<br />
    建議您改用 <a href="https://sofree.cc/google-chrome/">Google Chrome</a> 或
    <a href="https://sofree.cc/moz-firefox/">Firefox</a> 以取得最佳、最快的瀏覽效果!
</div>  <![endif]-->

接著,再把以下CSS丟到style.css檔案內,效果就有囉!(不過每個網站狀況不同,放上去時仍需微調)

#noie6 {
    background: #FFDFDF; /*背景色*/
    border: 1px solid #FF2F2F; /*邊線*/
    clear: both; /*清除繼承上方的浮動*/
    color: #555; /*字體顏色*/
    display: block; /*顯示方式*/
    font-size: 15px; /*字體大小*/
    height: 20px; /*高度*/
    letter-spacing: 1px; /*字體間距*/
    padding: 5px; /*內邊距*/
    position: relative; /*相對定位*/
    text-align: center; /*文字置中*/
    top: 10px; /*距離上方10px*/
    width: 975px; /*寬度*/
}

最後,狀況就是這樣子。只有IE6才會出現,IE7以上的瀏覽器或是非IE瀏覽器均不會出這樣的警告訊息。(如果有用IE6開本站,你會發現到內頁慘不忍睹Orz..,因為這次完全沒有校正IE6了。)

加個瀏覽器建議升級提示,跟IE6說掰掰!(If IE 語法)

If IE 判斷寫法

關於IE的判斷式寫法,簡單的範例如下語法,大家可以參考並自己改改看。這些資料在微軟的MSDN上面都有詳細記載著,如果覺得下方不清楚,也可以上官方文件看看。

  • lte:版本號小於等於→ 使用者版本 您指定的版本
  • lt:版本號小於→ 使用者版本 您指定的版本
  • gt:版本號大於→ 使用者版本 您指定的版本
  • gte:版本號大於等於→ 使用者版本 您指定的版本
<!--[if IE ]>如果想要 IE 所有使用者均看到,可以這樣寫。<![endif]—>
<!—[if (IE 6)| (IE 9)]>只有 IE6  IE9 才會顯示的寫法。<![endif]—>
<!—[if !(IE 7) ]>只有  IE7 才會顯示的寫法。<![endif]—>
<!--[if ltIE 6 ]>只有 IE6 以下 (包含IE6) 才會顯示的寫法。<![endif]—>
<!--[if lt IE 6 ]>只有 IE6 以下 (包含IE6) 才會顯示的寫法。<![endif]—>
<!--[if gtIE 8 ]>只有 IE8 以上 (包含IE8) 才會顯示的寫法。<![endif]—>
<!--[if gt IE 8 ]>只有 IE8 以上 (包含IE8) 才會顯示的寫法。<![endif]—>

快換瀏覽器吧!

推薦以下幾款瀏覽器,相信可以帶來更棒的瀏覽體驗。

  • Google Chrome: 瀏覽最快,完美整合Google服務,也提供附加元件。(強力推薦)
  • Firefox:適合網路重度使用者,附加元件超多,擴充性高!(推薦)
  • IE9:限Windows 7以上的使用者才可升級,體驗上還可以。
  • IE8:不要用IE6或IE7了,至少升級到這版本吧!(銀行系統還是可以開的)