提示用戶升級瀏覽器代碼 低於ie9的瀏覽器提示

一般想做一些酷炫的網站都有個煩惱，那就是兼容ie瀏覽器，好在現在使用ie的也越來越少，微軟也轉戰edge瀏覽器。

使用 Bootstrap經常用js插件可以模擬兼容舊版本的瀏覽器(bsie 鄙視IE)，而且經常可以看到如下的代碼：

    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

不過，個人還是傾向於提示用戶升級瀏覽器，而不是為了兼容老版瀏覽器，而煞費苦心的調試，累。。。

一般喜歡用上面的代碼，嵌入一個div提示用戶升級瀏覽器，說實話也不喜歡，這方式還得挨個改模板。下面提供一種直接一段JS 放在頁面或js文件里就可以實現提示：

(function(w){if(!("WebSocket"in w&&2===w.WebSocket.CLOSING)){var d=document.createElement("div");d.className="browsehappy";d.innerHTML='<div style="width:100%;height:100px;font-size:20px;line-height:100px;text-align:center;background-color:#E90D24;color:#fff;margin-bottom:40px;">\u4f60\u7684\u6d4f\u89c8\u5668\u5b9e\u5728<strong>\u592a\u592a\u65e7\u4e86</strong>\uff0c\u592a\u592a\u65e7\u4e86 <a target="_blank" href="http://browsehappy.osfipin.com/" style="background-color:#31b0d5;border-color: #269abc;text-decoration: none;padding: 6px 12px;background-image: none;border: 1px solid transparent;border-radius: 4px;color:#FFEB3B;">\u7acb\u5373\u5347\u7ea7</a></div>';var f=function(){var s=document.getElementsByTagName("body")[0];if("undefined"==typeof(s)){setTimeout(f,10)}else{s.insertBefore(d,s.firstChild)}};f()}}(window));

最終效果如下：

 

此段代碼針對於ie6 ie7 ie8 ie9都有提示。這種是比較簡單的提示方式，樣式相對比較丑。

 

===划重點===

可以到下面的網站里查看更多的提示樣式，根據自己的情況定義：

 了解更多：快樂瀏覽:瀏覽器升級提示。