Bootstrap兼容IE8

2017-09-13 · 🙈Lei · 0条 · 628次

近期公司一个WEB项目采用了Bootstrap,项目要求兼容IE8,Bootstrap官网介绍上说支持IE8,为了节省时间就用了。跑的时候出现了下面的情况(Bootstrap的兼容是需要额外处理,引入别的JS来支持的):

在Chrome、Edge、IE9及以上等浏览器下的某个界面:

而在IE8中该界面是下面这个鸟样子:

1.引入JS文件

为了解决这个问题,首先我们引入几个JS文件:

<!--[if lt IE 9]> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <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> <script src="https://cdn.bootcss.com/jquery-placeholder/2.3.1/jquery.placeholder.js"></script>
<script>
$(function(){
$('input').placeholder();
});
</script>
<![endif]-->

第一行的jquery.js是为了解决2.0后的版本不支持IE8的问题,所以引入的是1.12.4的版本。

第二行和第三行的两个js文件是解决Bootstrap.css适配的问题。

第四行的js和后面的<script></script>脚本是为了解决placeholder的问题。

2.bootstrap.js位置

然后我们要注意一定要把bootstrap.js文件在上面的代码之后引入,因为bootstrap.js要依赖jquery.js,js文件的引入顺序是会影响到执行效果的。

3.兼容模式设置

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>

增加上面的代码提示浏览器用最新的引擎渲染页面,而且会提示用户安装Google Chrome Frame,在保证浏览器外观的情况下,使用Chrome的内核。

相关链接:CSDN: 写给对meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"迷惑不解的小伙伴

4.placeholder设置

从第二张图片我们可以看到不仅仅布局跟我们想象中不同,而且placeholder也不好用了。IE8并不支持placeholder属性,所以我们引入上面第4行的jquery.placeholder.js和后面的<script></script>脚本来实现placeholder,这个并不是真正的解决placeholder,浏览器不支持是没办法添加这个属性的,只是在input标签上加了value值。




  0