校园一卡通已经到了收官之战。 现在已经完成了进销存、IC卡管理子模块。因为首页JS脚本的问题，IE8及其以下版本一直不能访问，今天先搞定了这个问题。
NO1:Javascript问题
因为IE中JS原型没有trim，所以不能执行含有trim的脚本。这个问题有多种解决方案：
一、不要trim了。最简单。
二、向网页中的原型加入trim：
- String.prototype.trim = function () {
-
return this .replace(/^\s*([\S\s]*?)\s*$/, '$1' );
-
}
三、使用jQuery中内置的trim。
因为我在项目里通篇使用了jQuery，所以才发现直接.trim()即可。第一个问题搞定，使用IE系列的浏览器也可以使用本系统了。
NO2:CSS问题
这是一个必须“靠”一下的问题。有过Web开发经历的男男女女们都在无时无刻地痛恨着两件事：1、咒骂着IE浏览器对CSS支持体系的陈腐与破烂（IE9除外，IE9已经不在独自发疯，向标准妥协了）；2、感叹着中国盗版的猖獗，IE10都要出来了，IE6仍然独大，而且很多人竟然天真地以为IE6是世界上最好的浏览器。
其实我做的项目是由着小范围特定用户使用的，所以我可以直接要求他们用Chrome浏览器，这不难办到。可是对于一个最求完美的我，岂能就这样放掉这个遗憾？于是在JS之后，我来到了CSS主战场。
一、首先面对的是主界面图片被挤跑的问题：
本来进入时，鼠标没有指向，都是行排小图：
鼠标顺便一指，最后一个就被挤跑了：
解决这个问题，并不难。造成这种现象的原因是，IE6、7、8下对BOX块的border有计算。所以讲本来计算正合适的margin-right缩小写就好，但为了不影响我Chrome和Firefox里已经调试OK的成果，就做了一个对IE的Hack：
- #choice ul li{
-
float:left;
-
margin-right:50px;
-
margin-right:40px\9; //就是这条
-
bottom:0;
-
position:relative;
-
}
之后在IE8和IE9下，测试也是正常显示了：
二、其次需要解决的是首页登录框的问题：
进入首页验证码框总是乱窜，尤其是在IE下极为活跃，一点都不规矩：
而且，IE9和IE8还必须分开设置，因为同一针对IE的代码IE9和IE8（含更低版本）是不一样的。
于是先针对IE8及其更低版本设置一下，这个设置直接在index.php的页面中进行：
- <!--[if lte IE 8]>
-
<style type="text/css">
-
form img{
-
float:right;
-
margin:-25px 33px 0 0;
-
height:20px;
-
}
-
</style>
-
<![endif]-->
然后IE8就正常了，但IE9还是稍有问题。所以，又跑到CSS文件里对IE9做设置：
- form img{
-
float:right;
-
margin:2px 25px 0 0;
-
margin:2px 35px 0 0\9; //这句所有IE都能读，但<!--[if lte IE 8]>也会起作用，相当于本句只对IE9
-
height:20px;
-
}
随后，大功告成。不论IE8/IE9/Firefox/Chrome都OK了。
随后附上一些基本的知识：
- javascript 的trim 函数在firefox 下面使用没有问题
-
-
Js代码
-
-
<script language="javascript">
-
-
var test1 = " aa ";
-
-
test1 = test1.toString();
-
-
test1 = test1.trim();
-
-
</script>
-
-
在火狐下这样用没有问题， 但是在IE下就报错
-
-
那么我们可以修改一下
-
-
Js代码 String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");}
-
-
在头上加上这一句，上面的就可以在IE和FF下都可以运行了
-
-
Js代码 <script language="javascript">
-
-
String.prototype.trim=function(){return this.replace(/(^\s*)|(\s*$)/g,"");}
-
-
var test1 = " aa ";
-
-
test1 = test1.toString();
-
-
test1 = test1.trim();
-
-
</script>
-
-
-
JQuery提供的方法：
-
-
Html代码
-
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<script src=""></script>
-
</head>
-
<body>
-
<button>Show Trim Example</button>
-
<script>
-
-
$("button").click(function () {
-
var str = " lots of spaces before and after ";
-
alert("'" + str + "'");
-
-
str = jQuery.trim(str);
-
alert("'" + str + "' - no longer");
-
});
-
-
</script>
-
-
</body>
-
</html>
- 之前只是针对所有的IE浏览器：
-
-
<!–[if IE]>
-
<link href=”Style/IE.css” rel=”stylesheet” type=”text/css” />
-
<![endif]–>
-
要避掉IE8的话就得：
-
-
<!–[if lt IE 8]>
-
<link href=”Style/IE.css” rel=”stylesheet” type=”text/css” />
-
<![endif]–>
-
lt在此作小于用，也就是小于IE8的版本都能识别。
-
-
或者：
-
-
<!–[if lte IE 7]>
-
<link href=”Style/IE.css” rel=”stylesheet” type=”text/css” />
-
<![endif]–>
-
lte在此作小于及等于用，也就是小于及等于IE7的版本能识别。
-
-
或者：
-
-
<!–[if !(IE 8)]>
-
<link href=”Style/IE.css” rel=”stylesheet” type=”text/css” />
-
<![endif]–>
-
<!–[if !(IE 8)]><![endif]–>在此单独避掉IE8版本。
阅读(6466) | 评论(5) | 转发(2) |
