Web前端重构遇到的坑，献给被坑到的自己

来源：互联网发布：68淘宝小号网是真的吗编辑：程序博客网时间：2024/05/14 06:01

最近系统开始重构前端页面，兼容IE7、IE8、IE9。原系统只支持IE6、IE7、IE8。然后老代码的各种坑就出现了。

#1.JS Date的getYear方法返回的年份

Date.getYear()在IE5/6/7/8上返回的是2014，IE9及之后都是114年（即差1900年），测试代码：

<html><head><title>测试Date Year</title><script type="text/javascript">function testYear () {var d = new Date();alert("year:"+d.getYear()+" fullYear:"+d.getFullYear());}testYear();</script></head><body></body></html>

话说getYear返回114年才是对的，微软自己把1900年加上了。不过IE9及之后的浏览器又恢复成114年了。修改方式很简单，只需要使用getFullYear()即可。

#2. 最近美工给了一个demo，里面的button都是用<button></button>标签实现的，以前都是用<input type='button'/>。对这个button标签不是很了解，看这名字就是个按钮么还能整出什么花来。不过就是这个想法，被坑了一把。

我把这个button放在了form标签里。这个标签不是用来提交表单的。当时浏览器开的是IE7的文档模式，一切正常。提交测试之后，测试一点按钮就提交表单跳转了。看了半天没有问题。最后发现了button标签在IE7下类型type='button' ，在IE7之后type='submit'。真相大白后，含泪加上了type='button'。

#3.IE7及以下版本支持可以通过getElementById获取name属性的标签，下面代码在IE7及以下版本是正常的，IE7以上是获取不到值得。

<html><head></head><body><input name="test" type="text" value="测试"><input type="button" value="确认" onclick="alert(document.getElementById('test').value);"></body></html>

这也是改造老WEB页面时候经常遇到的问题。按正规写法写，加上ID属性就好了。

#4.IE7及以下通过getElementById不区分大小写，IE7以上区分大小写。通过下面的例子在不同的浏览器文档模式下测试下就知道了。

<html><head></head><body><input id="Test" name="test" type="text" value="测试"><input type="button" value="确认" onclick="alert(document.getElementById('test').value);"></body></html>

#5.未完待续...

编程有很多坑，浏览器因为不同的公司，不同的版本会存在很大差异，记录下这些差异给自己提个醒。

0 0