zoukankan      html  css  js  c++  java
  • 解决低版本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>内


  • 相关阅读:
    取一定范围的随机数
    小菜学Chromium之OpenGL学习之二
    程序员健康之路
    解密硬件解码关键技术
    Android 图片开发内幕系列第一篇
    你所不知道的html5与html中的那些事第三篇
    如何加密android apk
    linux设备驱动第五篇:驱动中的并发与竟态
    快速调试chromium
    小菜鸟带着梦想学chromium
  • 原文地址:https://www.cnblogs.com/xuepei/p/10832907.html
Copyright © 2011-2022 走看看