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

最新推荐文章于 2024-05-10 08:44:12 发布

geektao

最新推荐文章于 2024-05-10 08:44:12 发布

阅读量1.6k

点赞数

分类专栏：前端文章标签：前端 date

本文链接：https://blog.csdn.net/xt0916020331/article/details/41143209

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近系统开始重构前端页面，兼容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="确认" οnclick="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="确认" οnclick="alert(document.getElementById('test').value);">
</body>
</html>

#5.未完待续...

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