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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
学习使用bootstrap基本控件(table、form、button)
Apr 12 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 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
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
语义化 H1 标签
2008/01/14 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
js的一些常用方法小结
2011/06/29 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
Python机器学习logistic回归代码解析
2018/01/17 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
Python decimal模块使用方法详解
2020/06/08 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
中专生的个人自我评价
2013/12/11 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
服务标兵事迹材料
2014/05/04 职场文书
入党推优材料
2014/06/02 职场文书
党员带头倡议书
2015/04/29 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
详解OpenCV曝光融合
2022/04/29 Python