admin管理员组文章数量:1644454
最近项目中对于前台登录要加个验证码功能,用canvas画了一个验证码,但是在IE8及以下浏览器上不兼容,原因就是ie8不支持H5标签,自己百度了一下,也踩了许多坑,最终解决了ie8及以下的兼容问题,趁节假日时间做个总结,顺便把踩过的坑以及解决办法简单说一下。
一 、让IE8支持HTML5标签
首先IE浏览器对于H5的标签是不支持的,这里先下载一个html5.js,添加到自己的工作目录里,在head标签里引入就可以了。
<!--[if IE]>
<script src="/js/html5.js" type="text/javascript"></script>
<![endif]-->
二 、下载插件excanvas.js。
对于IE6~9版本浏览器兼容canvas,Google提供了一个有效的解决方法ExplorerCanvas,简称excanvas.js。同样是在head标签里引入,下载链接在此:ExplorerCanvas
<!--[if IE]>
<script type="text/javascript" src="/js/html5.js"></script>
<script type="text/javascript" src="/js/excanvas.js"></script>
<![endif]-->
注意: 对于网上有的教程说下载excanvas_r3.zip(提取密码:84pn)解压后,把excanvaspiled.js拷贝到自己的目录里并引用。一般来说这个已经是比较老的版本了,在使用上可能出现各种各样的问题,不建议使用。
基本上前两步就能完美的让你的canvas图在IE8及以下显示出来了
但由于有的小伙伴在写css样式上可能会用css3的属性,比如box-shadow之类的,但是在IE上对css3的属性不支持,这里也有解决方法:下载 ie-css3.htc,在自己的
css器里加上behavior属性即可解决。在其他选择器里如果有css3属性方法相同,代码如下:
#canvas{
width: 600px; height: 400px;
background: #000;
border-radius: 20px;
padding: 20px;
margin: 20px auto;
box-shadow: 0 0 40px #222;
behavior: url(/js/ie-css3.htc);
}
到此,便可完美解决IE浏览器哥版本对canvas的 兼容了。
三 、 常见问题解决
- 根据官方文档,推荐将插件应用到标签当中,否则会报如下错误。
“Unknown runtime error” at the following line: el.innerHTML = ”; - 还有其他修多问题包括 getContext 报错,或者其他一些之类的,基本上都是因为excanvas.js不是最新版本的。只要用github上面最新版本的excanvas.js就可以了。
四 、参考链接
感谢各位前辈总结的原创文章指点:
https://blog.csdn/huang100qi/article/details/7698647
https://www.douban/note/484439638/
版权声明:本文标题:最新最全IE8及以下低版本浏览器支持canvas标签及常见的一些问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729383753a1199283.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论