浏览器兼容性解决之道

前言

浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是IE。对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹。所以,常见的兼容性下限是IE8。这也正是Angular1.2x的兼容性目标,Angular团队声明:Angular的持续集成服务器会在IE8下运行所有的测试。但这些测试不会运行在IE7及以下版本,它们也不会保证Angular将会工作在这些IE版本上。

而1.3以后的版本,Angular官方不再保证对IE8的兼容。当然,这并不表示一定不能在IE8用,但是官方不在针对IE8对集成测试,如果确实需要在兼容IE8的同时使用1.3,就需要自己做全面测试。不过,这样做的话性价比比较低。所以,在工程实践中,一般以IE8为分界,如果需要兼容,就用1.2,否则就用1.3+。

在项目开发过程中,自己一直都是在Chrome浏览器中开发、调试服务端管理前台。后期测试阶段,Boss提出要做到主流浏览器(例如:360浏览器、qq浏览器、IE)兼容。这个要求还是很合理的。经过测试360、qq、UC、火狐等浏览器均不存在所谓的兼容性问题。最令人头大的就是IE。不过,我坚信:是问题就可以得到解决。

测试环境:

Angular版本 : angular-1.3.0.14

Jquery版本  :jquery-1.9.1

浏览器版本    : IE10

解决

初次尝试设置IE10的兼容性选项,无解。

IE不兼容问题是程序中调用jquery,抢占了$的原因。解决方案如下:

1.JQuery方案

1.1 页面引入jquery.js库

<script src="jquery-1.7.1.js" type="text/javascript"></script>

1.2 添加两个js函数

添加LockTableHead()和translate()函数。

注意:为防止JQuery与现有js框架抢夺$标识符,要执行jQuery.noConflict()。

  1. function LockTableHead(divId, tableId) {
  2. var jq = jQuery.noConflict();
  3. jq("#" + divId).scroll(function () {
  4. var delta = jq("#" + divId).scrollTop();
  5. if (delta > 0) {
  6. translate(jq("#" + tableId +" th"), 0, delta - 2);
  7. }
  8. else {
  9. translate(jq("#" + tableId + " th"), 0, 0);
  10. }
  11. });
  12. }
  13. function translate(element, x, y) {
  14. var translation = "translate(" + x + "px," + y + "px)"
  15. element.css({
  16. "transform": translation,
  17. "-ms-transform": translation,
  18. "-webkit-transform": translation,
  19. "-o-transform": translation,
  20. "-moz-transform": translation
  21. });
  22. }

1.3 修改页面,调用js

在适当的地方添加LockTableHead()函数调用即可。如下:

<button onclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>

注意:要提供一个div的id和table的id 。

2.非JQuery方案(纯js)

2.1 思路

受JQuery方案的启发,将它翻译回普通js即可。

2.2 添加js函数

添加LockTableHead()函数。

  1. function LockTableHead(divId, tableId) {
  2. document.getElementById(divId).onscroll = function () {
  3. var delta = document.getElementById(divId).scrollTop;
  4. var t1 = "translate(0px," + delta + "px)";
  5. th_Array=document.getElementById(tableId).getElementsByTagName("th");
  6. for (i = 0; i < th_Array.length; i++) {
  7. th_Array[i].style["-ms-transform"] = t1;
  8. }
  9. };
  10. }

2.3 修改页面,调用js

同上,在适当的地方添加LockTableHead()函数调用即可。如下:

<button onclick="LockTableHead('grid','T000000');" name="b1" type="button">button</button>

注意:要提供一个div的id和table的id 。

3.总结

以上两方案实际上都是使用了css3中的translate函数,这就意味着浏览器得支持这个功能是前提条件。

另外,如果页面上只有一个table,也可以通过getElementsByTagName的方式定位table,并用parentNode的方式定位div,这样就不必传递它们的id了。

以上方法貌似只是解决浏览器局部兼容性问题。对于全面兼容不适用。

IE浏览器兼容性问题真的难倒自己了。始终找不到一个好的解决方案。错误提示如下:

居然有个对象是没定义的?!

Object.keys方法是ES5中的函数。IE8不支持。

自己根据提示修改了lodash.js文件中的L083,L229,将其进行了注释。并引入了es5-shim.js文件。

是否需要考虑一下浏览器的内核?

注:

Google Chrome是采用Chrome内核,基于开源内核chromium。打开网页的速度快,且很安全,性能极佳,界面简洁,功能多,但兼容性有待提高。

Internet Explorer是采用IE内核,打开网页的速度一般,安全性一般,但兼容性极高,界面简单,功能较少。

暂时搁置....欢迎能够解决此问题的朋友留言。

参考文献

1.http://www.cnblogs.com/ahl5esoft/p/3872597.html

2.http://blog.csdn.net/jumtre/article/details/50380311

3.http://www.jb51.net/article/52583.htm

4.http://www.jb51.net/article/45428.htm

美文美图

AngularJS进阶(三十五)浏览器兼容性解决之道的更多相关文章

  1. AngularJS进阶(三十七)IE浏览器兼容性后续

    IE浏览器兼容性后续 前言 继续尝试解决IE浏览器兼容性问题,结局方案为更换jquery.angularjs.IE的版本. 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js ...

  2. Python进阶(三十五)-Fiddler命令行和HTTP断点调试

    Python进阶(三十五)-Fiddler命令行和HTTP断点调试 一. Fiddler内置命令   上一节(使用Fiddler进行抓包分析)中,介绍到,在web session(与我们通常所说的se ...

  3. Java进阶(三十五)java int与integer的区别

    Java进阶(三十五)java int与Integer的区别 前言 int与Integer的区别从大的方面来说就是基本数据类型与其包装类的区别: int 是基本类型,直接存数值,而Integer是对象 ...

  4. AngularJS进阶(三十九)基于项目实战解析ng启动加载过程

    基于项目实战解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2 ...

  5. AngularJS进阶(三十六)AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)

    AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记) 前言 在"AngularJS项目开发技巧之图片预加载" ...

  6. AngularJS进阶(二十五)requirejs + angular + angular-route 浅谈HTML5单页面架构

    requirejs + angular + angular-route 浅谈HTML5单页面架构 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又 ...

  7. AngularJS进阶(三十四)Angular数据更新不及时问题探讨

    Angular数据更新不及时问题探讨 前言 在修复控制角标正确变化过程中,发觉前端代码组织层次出现了严重问题.传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染.根据< ...

  8. 网站开发进阶(三十五)JSP页面中的pageEncoding和contentType两种属性

    JSP页面中的pageEncoding和contentType两种属性 本文介绍了在JSP页面中经常用的两种属性,分别是pageEncoding和contentType,希望对你有帮助,一起来看. 关 ...

  9. AngularJS进阶(三十八)上拉加载问题解决方法

    AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...

随机推荐

  1. 关于Linux下软件包aptitude的相关操作

    aptitude+回车 - 进入aptitude操作界面,可以对预览查看各种软件包 aptitude show package_name - 列出与XXX相关的软件包信息,但是并不能看到该软件包所安装 ...

  2. Java格式化时间

    Java格式化时间 将秒或者毫秒值格式化成指定格式的时间 效果图 工具类 工具类里我只列出了一种格式的格式化方式,可以根据自己的需求,修改"yyyy-MM-dd hh:mm:ss" ...

  3. Android Multimedia框架总结(二十一)MediaCodec中创建到start过程(到jni部分)

    转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/53386117 我最近正在参加CS ...

  4. nginx反向代理和rewrite进行解决跨域问题、去掉url中的一部分字符串,通过nginx正则生成新的url

    场景:表面上访问的是http://127.0.0.1:7777/test/xhtml//tpl/app-tpl-webapp/css/base.css, 实际上看的是http://127.0.0.1: ...

  5. 谷歌面试题:输入是两个整数数组,他们任意两个数的和又可以组成一个数组,求这个和中前k个数怎么做?

    谷歌面试题:输入是两个整数数组,他们任意两个数的和又可以组成一个数组,求这个和中前k个数怎么做? 分析: "假设两个整数数组为A和B,各有N个元素,任意两个数的和组成的数组C有N^2个元素. ...

  6. Java基本语法-----java运算符的优先级与结合性

    这是本人以前的上学期间java 运算符这块知识的总结的,截图存到了word里,大家将就看下吧(不会用Markdown的表格 不然就在写一遍了 T T). [正在看本人博客的这位童鞋,我看你气度不凡,谈 ...

  7. Android设置item的行间距,以及去掉分割线方法

    1.设置item的行间距: 可以在xml布局文件中的listView下设置xml属性: android:divider="#00000000" android:dividerHei ...

  8. qq侧滑

    上一篇博客带大家实现了:Android 自定义控件打造史上最简单的侧滑菜单 ,有兄弟看了以后说,你这滑动菜单过时了呀~QQ5.0的效果还不错~~嗯,的确,上一篇也承诺过,稍微修改上一篇的代码,实现QQ ...

  9. The Chain Of Responsibility (1)

    今天分享一下,设计模式中的责任链模式,其余的不过多叙述. 思路 在正式接触责任连之前,我们可以想象到的应该是一个链,链表?要处理一件事需要一个链似得?其实答案差不多就是这样.设计模式也都是从朴素的思维 ...

  10. FFmpeg源代码简单分析:libavdevice的gdigrab

    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...