解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv
用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。所以我们在使用过程中,想要让低版本的浏览器,即IE9以下的浏览器支持,那么这款html5shiv.js是一个非常好的选择!
使用方法,在<head>内添加如下代码:
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5shiv.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。
插件:Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持媒体查询。git地址https://github.com/FOmaerl/Respond.js
响应式布局,理想状态是,对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然占据了比较大量的市场份额,使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢? 这里我们需要借助这样一个文件:respond.js
.
Respond.js 是一个快速、轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width
和 max-width
特性,实现响应式网页设计(Responsive Web Design)。
使用方法:
<!--[if lt IE 9]>
<script src="js/respond.js"></script>
<![endif]-->
引入到css文件后面,且越早引入越好,这样在IE下面看到页面闪屏的概率就越低,因为最初css会先渲染出来,如果respond.js加载得很后面,这时重新根据media query
解析出来的css会再改变一次页面的布局等,所以看起来有闪屏的现象.
插件:excanvas.js ,IE8 及以下的浏览器不兼容 canvas,可以使用 ExplorerCanvas 做兼容性的替代。git地址:https://github.com/yinso/excanvas
使用方法,最好在<head>标签内引入下面代码
<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->
html中的canvas标签必须写在excanvas初始方法之后,即:canvas必须在excanvas初始完成后生成,因此最好把excanvas.js引入到<head>内
解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题的更多相关文章
- html5新特性
这一篇博文不会告诉你怎么去使用html5的新特性,只会给你总结一下新特性------对于好学的人可以把这篇文章当做一个目录 对于初接触的人来说是一个导向 对于已经接触过的人来说是一个检测你掌握程度的检 ...
- HTML5新特性之CSS+HTML5实例
1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...
- xmake v2.1.5版本正式发布,大量新特性更新
此版本带来了大量新特性更新,具体详见:xmake v2.1.5版本新特性介绍. 更多使用说明,请阅读:文档手册. 项目源码:Github, Gitee. 新特性 #83: 添加 add_csnippe ...
- web全栈架构师[笔记] — 03 html5新特性
HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...
- HTML5新特性:范围样式
原文出处:http://blog.csdn.net/hfahe/article/details/7381141 Chromium 最近实现了一个HTML5的新特性:范围样式,又叫做< ...
- html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性 和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等2)增强型表单 表单2. ...
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
- 前端进阶系列(三):HTML5新特性
HTML5 是对 HTML 标准的第五次修订.其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入.HTML5 的语法是向后兼容的.现在国内普遍说的 H5 是包 ...
- 转: HTML5新特性之Mutation Observer
转: HTML5新特性之Mutation Observer Mutation Observer是什么 Mutation Observer(变动观察器)是监视DOM变动的接口.当DOM对象树发生任何变动 ...
随机推荐
- Java的Lambda表达式
Java的Lambda表达式 1. 什么是Lambda表达式 简单的说,Lambda表达式就是匿名方法.Lambda表达式让程序员能够使用更加简洁的代码,但是同样也使代码的可读性比较差. Lambda ...
- Shiro RememberMe 1.2.4远程代码执行漏洞-详细分析
本文首发于先知: https://xz.aliyun.com/t/6493 0x01.漏洞复现 环境配置 https://github.com/Medicean/VulApps/tree/master ...
- .NET Standard
A formal specification of the APIs that are common across .NET implementations What is .NET Standard ...
- [idea][转]理解 IntelliJ IDEA 的项目配置和Web部署
1.项目配置的理解 IDEA 中最重要的各种设置项,就是这个 Project Structre 了,关乎你的项目运行,缺胳膊少腿都不行.最近公司正好也是用之前自己比较熟悉的IDEA而不是Eclipse ...
- js的event详解
event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等.event对象只在事件发生的过程中才有效.event的某些属性只对特定的事件有意义.比如,fromElement ...
- Scrapy框架学习参考资料
00.Python网络爬虫第三弹<爬取get请求的页面数据> 01.jupyter环境安装 02.Python网络爬虫第二弹<http和https协议> 03.Python网络 ...
- java-对象的区别
1.JavaBean 是一种JAVA语言写成的可重用组件.为写成JavaBean,类必须是具体的和公共的,并且具有无参数的构造器.JavaBean 通过提供符合一致性设计模式的公共方法将内部域暴露成员 ...
- Linux 基本权限管理
1.linux权限表示: -rw-r--r-- (一共10位): 第一位:表示文件类型: 常用的三种文件类型:- 表示一般文件,d 表示目录,l 表示软链接文件: 后九位:每三位为一组: rwx r- ...
- 02.03 win server r2 搭建FTP站点
============ftp服务器搭建=============== 先要搭建iis信息服务: 1.打开服务器管理器,角色>添加角色 2.选择角色服务:应用程序开发.FTP服务器.安全性 3. ...
- 亿级mongodb数据迁移
1. 预先准备有效数据单号池,通过单号拉取数据处理 单号表默认为1 01 使用findAndModify 更新单号表状态为 2 读取单号 循环读取100 条 02 通过运单号批量查询 Aladin_W ...