Web前端重构遇到的坑

时间:2021-11-28 13:34:41

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

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

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

[html]  view plain copy Web前端重构遇到的坑 Web前端重构遇到的坑
  1. <html>  
  2. <head>  
  3. <title>测试Date Year</title>  
  4. <script type="text/javascript">  
  5.     function testYear () {  
  6.         var d = new Date();  
  7.         alert("year:"+d.getYear()+" fullYear:"+d.getFullYear());  
  8.     }  
  9.     testYear();  
  10. </script>  
  11. </head>  
  12. <body>  
  13. </body>  
  14. </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 Web前端重构遇到的坑 Web前端重构遇到的坑
  1. <html>  
  2. <head></head>  
  3. <body>  
  4. <input name="test" type="text" value="测试">  
  5. <input type="button" value="确认" onclick="alert(document.getElementById('test').value);">  
  6. </body>  
  7. </html>  
          这也是改造老WEB页面时候经常遇到的问题。按正规写法写,加上ID属性就好了。


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

[html]  view plain copy Web前端重构遇到的坑 Web前端重构遇到的坑
  1. <html>  
  2. <head></head>  
  3. <body>  
  4. <input id="Test" name="test" type="text" value="测试">  
  5. <input type="button" value="确认" onclick="alert(document.getElementById('test').value);">  
  6. </body>  
  7. </html>