以下为内容整理自 前端开发博客
用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。
由于IE6/IE7/IE8还有很大一部分用户,为了让网站浏览者都能正常的访问HTML5网站,解决方案就有下面两个:
为网站创建多套模板,通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面,这样的维护成本比较高,也失去响应式设计的意义。
使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式(Bootcss官方例子也是如此)。
原理:利用脚本document.createElement(“”)创建对应的脚本,CSS选择器便可正确应用到该标签。
官方地址:http://code.google.com/p/html5shiv/GitHub 项目地址:https://github.com/aFarkas/html5shiv 详细分解实现思路 : http://caibaojian.com/html5shiv.html
引入respond.min.js,但要在css的后面(越早引入越好,在ie下面看到页面闪屏的概率就越低,因为最初css会先渲染出来,如果respond.js加载得很后面,这时重新根据media query解析出来的css会再改变一次页面的布局等,所以看起来有闪屏的现象)
官方demo地址:http://scottjehl.github.com/Respond/test/test.html
详细分解实现思路 : http://caibaojian.com/respondjs.html
代码段: 引用bootstrap
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[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]--> </head>