Web前端重构遇到的坑

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

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

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

 
   [html]  
   view plain 
   copy 
    
    
    
  
<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]  
   view plain 
   copy 
    
    
    
  
<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]  
   view plain 
   copy 
    
    
    
  
<html>  
<head></head>  
<body>  
<input id="Test" name="test" type="text" value="测试">  
<input type="button" value="确认" onclick="alert(document.getElementById('test').value);">  
</body>  
</html>

秒客网

Web前端重构遇到的坑

相关文章