引导是最受欢迎的HTML, CSS和javascript框架,用于开发响应式布的局,移动设备优先的WEB项目。——引导官网
引导来自推特,是目前最受欢迎的前端框架.Bootstrap是基于HTML, CSS, JavaScript的,它简洁灵活。开发过程中,我们只需通过给DOM元素添加相应的类即可调用,使得网络开发更加快捷。
接下来进入主题,谈谈引导3浏览器兼容性问题及其对应的解决方案:
1,移动设备支持情况
2 PC端支持情况
注:Windows支持IE 8。
请参考浏览器支持情况以获取详细的引导3在各个浏览器上的支持情况。
如上述所示,IE8是被支持的。然而,很多CSS3属性和HTML5元素是不被支持的,例如,引导的响应式布局是通过CSS3的媒体查询(媒体查询)功能实现的,根据不同的分辨率来匹配不同的样式,IE8浏览器并不支持这一优秀的CSS3特性.Bootstrap在开发文档中已经明确指出,IE8需要回应。js配合才能实现对媒体查询(媒体查询)的支持。按照官方文档,笔者在HTML文件& lt; head> & lt;/head>标签底部添加了如下的代码:
& lt; !——(如果lt IE 9)比;
& lt;脚本src=" https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/respond.js/1.4.2/respond.js "祝辞& lt;/script>
& lt; ! [endif]——比;
之前
注:其中html5shiv.min。js文件是让不完(全)支持html5的浏览器支持html5标签;回应。js文件是让IE8实现对媒体查询(媒体查询)的支持。
但是,在IE8浏览器中打开页面发现,兼容性问题并没有得到解决(坑,坑,坑)。通过查阅相关资料,笔者总结几点注意事项(<>强效果实现的关键):
<李>本地调试需要Web服务器(如IIS, Apache, Nginx),单纯地本地打开文件不能看到兼容效果;李
<李>如果你发现已经引用了回应。js和引导,仍无效果,请查看你的引导是否使用了CDN文件;李
<李> Bootstrap3需要Html5文档声明,李
<李> Jquery版本需要在2.0以下。
李
模板代码如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt; !——编码格式——比;
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt; !——作者——比;
& lt;元名称==白髡摺北取白髡摺蹦谌?
& lt; !——网页描述——比;
& lt;元名称=懊枋觥蹦谌?癶ello”比;
& lt; !——关键字使用”、“分隔——比;
& lt;元name=肮丶省蹦谌?癮, b, c”比;
& lt; !——禁止浏览器从本地机的缓存中调阅页面内容——比;
& lt;元http-equiv=霸幼ⅰ蹦谌?皀o - cache”比;
& lt; !——用来防止别人在框架里调用你的页面——比;
& lt;元http-equiv=癢indow-target”内容=癬top”比;
& lt; !——内容的参数都有,没有一个指数,noindex,跟进,nofollow,默认是——比;
& lt;元名称=盎魅恕蹦谌?懊挥小北?
& lt; !——收藏图标——比;
& lt;链接rel="快捷方式图标" href=" https://www.yisu.com/zixun/favicon.ico " rel=巴獠縩ofollow”比;
& lt; !——网页不会被缓存——比;
& lt;元http-equiv=癱ache - control”内容=皀o - cache, must-revalidate”比;
& lt; !——解决部分兼容性问题,如果安装了GCF,则使用GCF来渲染页面,如果未安装GCF,则使用最高版本的IE内核进行渲染。——比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘,chrome=1”比;
& lt; !——页面按原比例显示——比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1”比;
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/plugin/bootstrap-3.3.0/css/bootstrap.min.css " rel=巴獠縩ofollow”比;
& lt; !——(如果lt IE 9)比;
& lt;脚本src=" https://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/respond.js/1.4.2/respond.js "祝辞& lt;/script>
& lt; ! [endif]——比;
& lt;/head>
& lt; body>
& lt;脚本src=" https://www.yisu.com/zixun/plugin/jquery/jquery-1.11.2.min.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
