Bootstrap 3浏览器兼容性问题及解决方案


Posted in Javascript onApril 11, 2017

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。—— Bootstrap 官网

Bootstrap 来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript的,它简洁灵活。开发过程中,我们只需通过给DOM元素添加相应的class即可调用,使得 Web 开发更加快捷。

接下来进入主题,谈谈 Bootstrap 3 浏览器兼容性问题及其对应的解决方案:

1、移动设备支持情况

Bootstrap 3浏览器兼容性问题及解决方案

2、PC端支持情况

Bootstrap 3浏览器兼容性问题及解决方案

注:Windows 支持 IE 8-11。

请参考 浏览器支持情况 以获取详细的 Bootstrap 3在各个浏览器上的支持情况。

如上述所示,IE8 是被支持的。然而,很多 CSS3 属性和 HTML5 元素是不被支持的。例如,Bootstrap 的响应式布局是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分辨率来匹配不同的样式,IE8浏览器并不支持这一优秀的CSS3特性。Bootstrap在开发文档中已经明确指出, IE8 需要 Respond.js 配合才能实现对媒体查询(media query)的支持。按照官方文档,笔者在HTML文件<head></head>标签底部添加了如下的代码:

<!--[if lt IE 9]>
   <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
 <![endif]-->

注:其中 html5shiv.min.js 文件是让不(完全)支持html5的浏览器支持 html5 标签;respond.js 文件是让IE8实现对媒体查询(media query)的支持。

但是,在IE8浏览器中打开页面发现,兼容性问题并没有得到解决(坑、坑、坑)。通过查阅相关资料,笔者总结几点注意事项(效果实现的关键):

  • 本地调试需要Web Server(如IIS、Apache,Nginx),单纯地本地打开文件不能看到兼容效果;
  • 如果你发现已经引用了 respond.js 和 Bootstrap,仍无效果,请查看你的Bootstrap是否使用了CDN文件;
  • Bootstrap3 需要Html5文档声明;
  • Jquery 版本需要在2.0以下。

模板代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
 <!-- 编码格式 -->
 <meta charset="UTF-8">
 <title></title>
 <!-- 作者 -->
 <meta name="author" content="author">
 <!-- 网页描述 -->
 <meta name="description" content="hello">
 <!-- 关键字使用","分隔 -->
 <meta name="keywords" content="a,b,c">
 <!-- 禁止浏览器从本地机的缓存中调阅页面内容 -->
 <meta http-equiv="Pragma" content="no-cache">
 <!-- 用来防止别人在框架里调用你的页面 -->
 <meta http-equiv="Window-target" content="_top">
 <!-- content的参数有all,none,index,noindex,follow,nofollow,默认是all -->
 <meta name="robots" content="none">
 <!-- 收藏图标 -->
 <link rel="Shortcut Icon" href="favicon.ico" rel="external nofollow" >
 <!-- 网页不会被缓存 -->
 <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
 <!-- 解决部分兼容性问题,如果安装了GCF,则使用GCF来渲染页面,如果未安装GCF,则使用最高版本的IE内核进行渲染。 -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <!-- 页面按原比例显示 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="plugin/bootstrap-3.3.0/css/bootstrap.min.css" rel="external nofollow" >
 <!--[if lt IE 9]>
  <script src="https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
 <![endif]-->
</head>

<body>

 <script src="plugin/jquery/jquery-1.11.2.min.js"></script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
Oct 30 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
Vue-component全局注册实例
Sep 06 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 #Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 #Javascript
基于vuejs实现一个todolist项目
Apr 11 #Javascript
vue实现todolist单页面应用
Apr 11 #Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 #Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 #Javascript
javascript数组去重常用方法实例分析
Apr 11 #Javascript
You might like
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
基于laravel belongsTo使用详解
2019/10/18 PHP
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
Jquery焦点与失去焦点示例应用
2014/06/10 Javascript
jQuery实现鼠标点击弹出渐变层的方法
2015/07/09 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
跟老齐学Python之开始真正编程
2014/09/12 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
python读写csv文件方法详细总结
2019/07/05 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
一组SQL面试题
2016/02/15 面试题
农村文化活动总结
2014/08/28 职场文书
个人专业技术总结
2015/03/05 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers