让bootstrap3兼容IE8

初衷

如果没有记错的话,现在主流的win7系统配置的默认浏览器为IE8。可能大部分的使用者都不会使用IE浏览器,但总是有人用,依旧还有绝大多数360浏览器,猎豹浏览器的使用者。

IE浏览器使用的是Trident内核
360浏览器使用的是Trident和WebKit双核
猎豹浏览器使用的是Trident和WebKit双核

综上,如果你的网站使用了bookstrap尤其是应用到了响应式布局,那么为了你的客户打开你网页的一瞬间不被惊呆,赶紧让你的网站兼容IE8吧!

兼容

1.假设你已经写好的html文件是以下结构

  • 已经使用的html5标签
  • 引入BOOKSTRAP的css文件,强烈建议使用本地部署
<!doctype html>
<head>
<meta charset="UTF-8">
<title>YOUR_TITTLE</title>  
<meta name="description" content="" />
<meta name="author" content="RoverVan" />
<!-- css -->
<link href="__HOME__/css/bootstrap.min.css" rel="stylesheet" />
</head>

2.准备两个文件 respond.js 和 html5shiv.js

download或clone后 将/src/respond.js 拷贝到与bookstrap同源的目录下,具体可以比较下面example代码里respond.js位置和bookstrap.css的位置。

download或clone后 将/src/html5shiv.js 拷贝到与bookstrap同源的目录下

3.html 添加<meta>标签与两个文件的引入。

添加标签

<meta name="viewport" content="width=device-width, initial-scale=1"><!--定义媒体查询-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--确定IE版本号-->

引入两个文件
注意与css文件的引用地址对照

<!--[if lte IE 9]>
 <script src="__HOME__/js/respond.js"></script>
 <script src="__HOME__/js/html5shiv.js"></script>
<![endif]-->

4.最终代码

<!doctype html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>YOUR_TITTLE</title>  
<meta name="description" content="" />
<meta name="author" content="RoverVan" />
<!-- css -->
<link href="__HOME__/css/bootstrap.min.css" rel="stylesheet" />
<!--[if lte IE 9]>
 <script src="__HOME__/js/respond.js"></script>
 <script src="__HOME__/js/html5shiv.js"></script>
<![endif]-->
</head>

Contact me

如果有什么错误或者建议 OR 如果需要请教关于本主题的实现问题
请联系我吧!
Email:atrovervan@gmail.com

2016-07-15 07:04 122
Comments
Write a Comment