一卡通系统CSS/JS兼容IE9/8/7/6和Chrome

简介:     校园一卡通已经到了收官之战。    现在已经完成了进销存、IC卡管理子模块。因为首页JS脚本的问题,IE8及其以下版本一直不能访问,今天先搞定了这个问题。NO1:Javascript问题    因为IE中JS原型没有trim,所以不能执行含有trim的脚本。


    校园一卡通已经到了收官之战。
    现在已经完成了进销存、IC卡管理子模块。因为首页JS脚本的问题,IE8及其以下版本一直不能访问,今天先搞定了这个问题。

NO1:Javascript问题
    因为IE中JS原型没有trim,所以不能执行含有trim的脚本。这个问题有多种解决方案:
    一、不要trim了。最简单。
    二、向网页中的原型加入trim:
  1. String.prototype.trim = function () {
  2.     return this .replace(/^\s*([\S\s]*?)\s*$/, '$1' );
  3. }
    三、使用jQuery中内置的trim。
    因为我在项目里通篇使用了jQuery,所以才发现直接.trim()即可。第一个问题搞定,使用IE系列的浏览器也可以使用本系统了。

NO2:CSS问题
    这是一个必须“靠”一下的问题。有过Web开发经历的男男女女们都在无时无刻地痛恨着两件事:1、咒骂着IE浏览器对CSS支持体系的陈腐与破烂(IE9除外,IE9已经不在独自发疯,向标准妥协了);2、感叹着中国盗版的猖獗,IE10都要出来了,IE6仍然独大,而且很多人竟然天真地以为IE6是世界上最好的浏览器。
    其实我做的项目是由着小范围特定用户使用的,所以我可以直接要求他们用Chrome浏览器,这不难办到。可是对于一个最求完美的我,岂能就这样放掉这个遗憾?于是在JS之后,我来到了CSS主战场。
    一、首先面对的是主界面图片被挤跑的问题:
    本来进入时,鼠标没有指向,都是行排小图:
img_509f869e129f4ee3a91ee385b65ea24f.png


    鼠标顺便一指,最后一个就被挤跑了:
img_51d13ff90721d5a9d0168098d6209604.png


    解决这个问题,并不难。造成这种现象的原因是,IE6、7、8下对BOX块的border有计算。所以讲本来计算正合适的margin-right缩小写就好,但为了不影响我Chrome和Firefox里已经调试OK的成果,就做了一个对IE的Hack:
  1. #choice ul li{
  2.     float:left;
  3.     margin-right:50px;
  4.     margin-right:40px\9; //就是这条
  5.     bottom:0;
  6.     position:relative;
  7. }
    之后在IE8和IE9下,测试也是正常显示了:
img_3eb177fe1b9367171dd276930fef57c5.png


    二、其次需要解决的是首页登录框的问题:
    进入首页验证码框总是乱窜,尤其是在IE下极为活跃,一点都不规矩:
img_453e8cecdf5903d568ac15e2f17f7fc6.jpg


    而且,IE9和IE8还必须分开设置,因为同一针对IE的代码IE9和IE8(含更低版本)是不一样的。
    于是先针对IE8及其更低版本设置一下,这个设置直接在index.php的页面中进行:
  1. !--[if lte IE 8]>
  2. style type="text/css">
  3. form img{
  4.     float:right;
  5.     margin:-25px 33px 0 0;
  6.     height:20px;
  7. }
  8. /style>
  9. ![endif]-->
    然后IE8就正常了,但IE9还是稍有问题。所以,又跑到CSS文件里对IE9做设置:
  1. form img{
  2.     float:right;
  3.     margin:2px 25px 0 0;
  4.     margin:2px 35px 0 0\9; //这句所有IE都能读,但!--[if lte IE 8]>也会起作用,相当于本句只对IE9
  5.     height:20px;
  6. }
    随后,大功告成。不论IE8/IE9/Firefox/Chrome都OK了。
img_1eb70a834358eb9b26458c859c45cd07.jpg


     随后附上一些基本的知识:
  1. javascript 的trim 函数在firefox 下面使用没有问题

  2. Js代码

  3. script language="javascript">

  4.      var test1 = " aa ";

  5.      test1 = test1.toString();

  6.      test1 = test1.trim();

  7. /script>

  8. 在火狐下这样用没有问题, 但是在IE下就报错

  9. 那么我们可以修改一下

  10. Js代码 String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");}
  11.  
  12. 在头上加上这一句,上面的就可以在IE和FF下都可以运行了

  13. Js代码 script language="javascript">

  14.     String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");}

  15.     var test1 = " aa ";

  16.     test1 = test1.toString();

  17.     test1 = test1.trim();

  18. /script>

  19.  
  20. JQuery提供的方法:

  21. Html代码

  22. !DOCTYPE html>
  23. html>
  24. head>
  25.   script src="http://code.jquery.com/jquery-latest.js">/script>
  26. /head>
  27. body>
  28.   button>Show Trim Example/button>
  29. script>
  30.  
  31. $("button").click(function () {
  32. var str = " lots of spaces before and after ";
  33. alert("'" + str + "'");
  34.  
  35. str = jQuery.trim(str);
  36. alert("'" + str + "' - no longer");
  37. });
  38.  
  39. /script>
  40.  
  41. /body>
  42. /html>

  1. 之前只是针对所有的IE浏览器:

  2. !–[if IE]>
  3.   link href=”Style/IE.css” rel=”stylesheet” type=”text/css” />
  4. ![endif]>
  5. 要避掉IE8的话就得:

  6. !–[if lt IE 8]>
  7.   link href=”Style/IE.css” rel=”stylesheet” type=”text/css” />
  8. ![endif]>
  9. lt在此作小于用,也就是小于IE8的版本都能识别。

  10. 或者:

  11. !–[if lte IE 7]>
  12.   link href=”Style/IE.css” rel=”stylesheet” type=”text/css” />
  13. ![endif]>
  14. lte在此作小于及等于用,也就是小于及等于IE7的版本能识别。

  15. 或者:

  16. !–[if !(IE 8)]>
  17.   link href=”Style/IE.css” rel=”stylesheet” type=”text/css” />
  18. ![endif]>
  19. !–[if !(IE 8)]>![endif]>在此单独避掉IE8版本。

相关文章
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
|
8天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
14 0
|
9天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
16天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
JS+CSS随机点名详细介绍复制可用(可自己添加人名)
|
1月前
|
缓存 自然语言处理 前端开发
JS/CSS体积减少了67%,我们是如何做到的?
JS/CSS体积减少了67%,我们是如何做到的?
18 1
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式