bootstrap 兼容ie8

简单说明
完整代码
Demo下载

简单说明

最近做项目碰到个问题，就是用bootstrap做后台框架的时候，发现IE9以下都不能完整的兼容。

IE8表现为：界面兼容，bootstrap的动作不支持。
IE7更强大：全面不兼容

在网上搜了下解决方案，总感觉是太过零碎，杂乱，自己跟着改了半天，兼容问题还是没解决。后来在一个开源框架里面看到了这套兼容代码，经测试有效后，直接提取了出来，并且做了一个Demo，做为记录。

原代码展示

文档类型声明：

<!DOCTYPE html>

meta引入：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

css以及js：

<link href="css/bootstrap.min.css" rel="stylesheet" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

说明：
有看到网上说此处使用了CDN文件，会造成兼容失效。自己测试了下，未发现问题。<如果大家发现其它代码和demo一样，还是不兼容，可以找找这个原因>

CDN引用（仅做示例，不用写入代码）：
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

判断是否IE9及以下，引入兼容文件：

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

说明：
代码如果和demo一样，还是不兼容，尝试将“html5shiv.js”文件改为“html5shiv.min.js”。（demo中已放入html5shiv.min.js，直接该代码即可）

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><!--必要--><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"><!--结束--><meta name="tanxiang" content="bootstrap-ie-compatibility"><title>Bootstrap兼容IE8 Demo</title><link href="css/bootstrap.min.css" rel="stylesheet" /><script src="js/jquery-1.11.1.min.js"></script><script src="js/bootstrap.min.js"></script><!--[if lt IE 9]><script src="js/html5shiv.js"></script><script src="js/respond.min.js"></script><![endif]-->
</head>
<body><div class="dropdown"><a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="background-color: #31b0d5;display: block;height: 55px;color: #fff;line-height: 40px;border: 0px; width:120px;"><font style="font-size: 20px;">admin</font><span class="caret"></span></a><ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">设置</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">退出</a></li></ul></div>
</body>
</html>

效果说明

Chrome下效果：

IE8下效果：

如果以上代码还是不行，请注意“清除浏览器缓存”再试试。

Demo奉上

http://download.csdn.net/detail/tx_3355/9698636 [点击前往下载]

如有疏漏，欢迎指正。

bootstrap 兼容ie8浏览器相关推荐

bootstrap 兼容ie8 浏览器
今天晚上在玩弄bootstrap的时候,发现在ie8上不兼容(吐槽下,即使是官方的demo,在ie8上,效果也非常差,),原来是不支持媒体查询的缘故,但在项目开发中,ie8肯定得考虑的,找了好久,终于 ...
让Bootstrap 3兼容IE8浏览器
看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说.有几个点大家要注意. 1.本地调试需要Web Server(如IIS.Apache,Nginx),单纯地本地打开文件不能看到兼容效果. 2 ...
【兼容】兼容IE8浏览器
bootstrap3 兼容IE8浏览器近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框 ...
js导出word文档可以兼容IE8+浏览器适配其他浏览器
js导出word文档,兼容IE8浏览器其他浏览器需要引入两个文件:FileSaver.js 和 jqueryWordExport.js 需要兼容IE8浏览器需要引用:FileSaver.js exc ...
bootstrap3 兼容IE8浏览器
近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap ...
border-radius 兼容 IE8浏览器
我们都知道,前端开发最让人头疼的事情,就是兼容ie系列的浏览器了,不但麻烦还让人头秃,今天记录一个border-radius属性IE8浏览器兼容的问题.在IE8浏览器里面,border-radius这 ...
页面水印原生js 兼容ie8浏览器
需求缘由项目是前后端不分离开发的,很老的项目,里面很多插件只能支持ie8,业主公司浏览器都是ie8 ,这次想给所有页面添加用户水印,所以开发需要兼容ie8 水印代码创建一个js 文件waterma ...
bootstrap兼容ie8以下版本
2019独角兽企业重金招聘Python工程师标准>>> 由于bootstrap用到了css3+html5 并且ie8以下的浏览器不支持css3和html5.很多公司现在都市ie8以下 ...
bootstrap 兼容哪些浏览器
Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现,也就是说,在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同,但是功能是完整的.bootstrap3支持的浏览器: Chrome ...

bootstrap 兼容ie8浏览器