這兩個 JS 算是前端開發 必配置文件,不要問,為什么,因為國內的IE8用戶太強大了!!!
(內容全是來源於網絡文章整理:)
一、做頁面開發時我們基本都會需要解決的問題:
1、解決ie9以下瀏覽器對 html5新增標簽的不識別,並導致CSS不起作用的問題。
2、讓不支持css3 Media Query的瀏覽器 包括IE6-IE8等其他瀏覽器支持查詢。
由於IE6/IE7/IE8還有很大一部分用戶,為了讓網站瀏覽者都能正常的訪問HTML5網站,故這兩種問題還是需要解決的,
二、解決方案很簡單:在head標簽里添加如下代碼就行了:
<!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
以上代碼是一個注釋,作用是在 IE 瀏覽器的版本小於 IE9 時將讀取 以下 .js 文件,並解析它。
注意:國內用戶請使用國內相對穩定資源庫(Google 資源庫在國內不穩定)
有的項目客戶現場肯定都是內網環境,外網引入,還是不行的。最簡單的方法,還是把這兩個文件下載下來,放到自己本地了。
下載地址:respond.min.js / respond.js下載
html5shiv.min.js / html5shiv.js下載
三、代碼說明:
以下等等都是IE專門提供的一種語法,只有IE能識別運行,其他瀏覽器只會作為注解。
<!--[if !IE]> 除IE外都可識別 <![endif]--> <!--[if IE]> 所有的IE可識別 <![endif]--> <!--[if IE 6]> 僅IE6可識別 <![endif]--> <!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]--> <!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]--> <!--[if IE 7]> 僅IE7可識別 <![endif]--> <!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]--> <!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]--> <!--[if IE 8]> 僅IE8可識別 <![endif]--> <!--[if IE 9]> 僅IE9可識別 <![endif]-->
項目 | 范例 | 說明 |
---|---|---|
! | [if !IE] | The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression. NOT運算符。這是擺立即在前面的功能,操作員,或子表達式扭轉布爾表達式的意義。 |
lt | [if lt IE 5.5] | The less-than operator. Returns true if the first argument is less than the second argument. 小於運算符。如果第一個參數小於第二個參數,則返回true。 |
lte | [if lte IE 6] | The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. 小於或等於運算。如果第一個參數是小於或等於第二個參數,則返回true。 |
gt | [if gt IE 5] | The greater-than operator. Returns true if the first argument is greater than the second argument. 大於運算符。如果第一個參數大於第二個參數,則返回true。 |
gte | [if gte IE 7] | The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. 大於或等於運算。如果第一個參數是大於或等於第二個參數,則返回true。 |
( ) | [if !(IE 7)] | Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. 子表達式運營商。在與布爾運算符用於創建更復雜的表達式。 |
& | [if (gt IE 5)&(lt IE 7)] | The AND operator. Returns true if all subexpressions evaluate to true AND運算符。如果所有的子表達式計算結果為true,返回true |
| | [if (IE 6)|(IE 7)] | The OR operator. Returns true if any of the subexpressions evaluates to true. OR運算符。返回true,如果子表達式計算結果為true。 |
html5shiv.js 說明: 解決ie9以下瀏覽器對html5新增標簽的不識別,並導致CSS不起作用的問題。
respond.min.js說明: 讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。
上面解決方案里用的兩個JS文件地址,網上也有很多。不想用這個的可以自己再找一下別的cdn地址。
這里可以查到bootstrap的 其他CDN地址http://www.bootcdn.cn/
希望可以幫助到你。
by不言謝。