首页 专题 H5案例 前端导航 UI框架

关于bootstrap IE8的兼容性问题

作者:TG 日期: 2016-06-10 阅读: 1959
现在越来越多的网站都使用了Bootstrap,到现在,Bootstrap3是使用率较为高的,在chrome,firefox,safari,opera,360浏览器(极速模式)、搜狗浏览器等浏览器下均没有问题,不过,在ie8下的时候,还是出现了很多让人头疼的坑,现在我将解决方法总结一下:

  • ie8不支持media

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->

上面代码的意思是只要是IE9以下,就调用上面两个专门的js。
respond.js(Github)是用于媒体查询的,项目说明描述:要和需要进行媒体查询的文件放在同一域中。不然CDN部署的需要更改一些选项,之后再说。
html5shiv : html5.js (Github)是让不(完全)支持html5的浏览器“支持”html5标签。
注意:在本地运行,respond.min.js这个是不生效的,你必须放到服务器上运行。

我们还要注意的是,Jquery 2.0以上就不再支持IE 6/7/8 ,如果你要想使用Bootstrap3中的一些插件效果,就必须引入1.X版本的jQuery,比如1.10.2版本

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>


  • bootstrap不支持兼容模式

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

IE=edge表示强制使用IE最新内核,chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame(可以让用户的浏览器外观依然是IE的菜单和界面,但用户在浏览网页时,实际上使用的是Chrome浏览器内核),那么就用Chrome内核来渲染。

  • ie8不支持placeholder

<script type="text/javascript" src="jquery.placeholder.js"></script>

调用:

$('input, textarea').placeholder();

你可以到(GitHub)获取jQuery.placeholder.js



关注”全栈技术杂货铺“

全栈技术杂货铺