本文介绍了在Bootstrap开发中，为实现对IE低版本浏览器的兼容，必须引入html5shiv.js和respond.min.js这两个插件。前者解决IE9以下对HTML5新标签的不识别问题，后者使IE6-8支持CSS3 Media Query。文章详细说明了配置方法、注意事项及常见问题的解决方案。
在使用Bootstrap进行低版本IE浏览器兼容时，需引入这两个插件。
一、页面开发中通常需解决的核心问题
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专有，仅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地址：https://www.bootcdn.cn/
注意事项
1、需启动本地服务器（localhost），不可使用普通本地URL地址（file://开头）。
2、需外部引入CSS文件，将CSS样式书写在style标签中无效。
3、因respond插件需查找CSS文件再处理，故respond文件必须置于CSS文件之后。
4、虽将respond置于head或body后均可实现，但建议置于head中（原因见下文文档提示）。
5、最好不要为CSS设置utf-8编码，使用默认编码（原因详见下文文档提示部分）。
6、越早引入respond.js文件，越可能避免IE下出现的闪屏现象。
7、不支持嵌套的媒体查询。
8、utf-8字符编码对respond.js文件运行有影响。
官方API原文：if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.
基本含义：utf-8格式的CSS文件字符编码会对插件造成影响。
但在测试IE6-8时均能正常显示（无论css文件中增加charset设置还是在link标签中增加charset设置），故不清楚此bug的具体含义。
9、跨域可能会导致闪屏（尚未测试，具体情况不详）。
到此这篇关于前端开发必配置 html5shiv.js和respond.min.js的作用说明的文章就介绍到这了,更多相关html5shiv.js和respond.min.js内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！