加個瀏覽器建議升級提示，跟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系列的瀏覽器，會自動跳過這一段語法，並不會將語法內的東西載入，大家可以大大的放心，跳過就是不會執行，也就不會載入額外的東西，網站速度不受影響。(不過如果下錯判斷是那可就不一定了…)

文章目錄
  1. 加入IE判斷語法到網站中
  2. If IE 判斷寫法
  3. 快換瀏覽器吧！

加入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 lte IE 6 ]>只有 IE6 以下 (包含IE6) 才會顯示的寫法。<![endif]—>
<!--[if lt IE 6 ]>只有 IE6 以下 (不包含IE6) 才會顯示的寫法。<![endif]—>
<!--[if gte IE 8 ]>只有 IE8 以上 (包含IE8) 才會顯示的寫法。<![endif]—>
<!--[if gt IE 8 ]>只有 IE8 以上 (不包含IE8) 才會顯示的寫法。<![endif]—>

快換瀏覽器吧！

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

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