家政帮主页的ie兼容性改写

2016-07-20 00:20:00

虽然IE8及以下浏览器已经和时代格格不入，但很多人的电脑上的浏览器还是IE8及以下浏览器，而且xp系统最高版本的浏览器就是IE8，所有当用户想在电脑上搜索家政帮时，但他的浏览器是IE8之类低版本浏览器，此时他就不能看到完整信息，于是下面是对这问题的解决方案。

具体实现在IE8及以下浏览器兼容的实现是通过在body前的判断是否手机浏览器后面增加一个判断是否用户使用浏览器是否IE8及以下浏览器，如果是的话那么将跳入另一个页面，那个页面会完整显示主页中二维码等信息，如下图

代码部分如下

if(ua.indexOf("MSIE")>0){             if(ua.indexOf("MSIE 6.0")>0){               window.location.href="jzb-ie.html";          }             if(ua.indexOf("MSIE 7.0")>0){              window.location.href="jzb-ie.html";          }             if(ua.indexOf("MSIE 8.0")>0){//            window.location.href="jzb-ie.html";          }    }

这段代码中首先判断是不是IE，然后判断具体版本，当为6，7，8时跳转到另一个页面。另一个页面的具体代码如下：

家政帮-您的清洁好帮手    window.onload = function(){        var Width = document.getElementById("bb").clientWidth;        var Height = document.getElementById("bb").clientHeight;        $("# bg").css({"width":Width,"height":Height});        $("# mask").css({"width":Width,"height":Height});        $("# content").css({"width":Width,"height":Height});        $("# inc").click(function(){            window.location.href="insurance.html";         })    }

其中canvas标签我删除了它，然后将剩下的图片的宽高进行了适配浏览器设置，让它和浏览器一样宽高，当无法做到动态适应，当你缩放浏览器大小是需要重新刷新浏览器才能使页面适应浏览器大小，还有个问题我还没解决那就是这个页面中加载会有些延迟，我现在还在想解决方法。

以下是我的思路：

访问家政帮的主页时，看到主页用了canvas来制作图像和fadein来实现画面的渐显效果，但我知道IE8及以下浏览器是对canvas是不支持的，于是我在IE8打开了公司主页，这时它的画面是这样的

当我用谷歌浏览器打开公司主页时，它会出现一个canvas实现的擦除污垢效果，并且之后，家政帮的二维码及其他信息会出现，但IE8只会出现这个页面，并不会出现在其他高版本浏览器中出现的特效。于是我想是否能解决这个问题，我便在网上查找资料，找到了一个对IE8及以下的浏览器能兼容canvas的方法，具体实现是将一段代码包括在HTML的BODY里, canvas元素的后面:

里面的excanvas.js是gihub上的一个开源js文件，它能使IE8及以下浏览器实现对canvas的支持，但我使用了该方法却还是不能实现动画擦除效果，费了很久来查找原因，但没能找到，现在还在继续寻找其他方法，于是我想退而求其次解决fadein在IE8及以下浏览器没有效果的问题，具体解决方案有三个，第一个是将jquery中的fade重写，第二种是使用fadeto，第三种是把绝对定位换成浮动，但很遗憾，我用这三种方法也没解决问题，于是我只能用最简单也是最笨的方法，那就是直接判断用户的浏览器，然后如果是目标浏览器那就跳转到一个没有canvas和fadein效果的页面，最后就用了文章最上面的方法。

关键字：html5

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！