IE版本兼容性问题

Question

我的问题并不是什么具体的代码问题，我只是想请教一下关于IE兼容性的知识，最近公司丢给我一个2011年的项目，是个基于B/S的补丁管理项目，我的系统安装的IE版本是IE11，但实际改动这个平台的页面时，却会发生一些IE8,IE7的兼容性问题，比如使用font-awesome时，需要增加IE7兼容的js文件才能使用fa，比如使用getElementsByClassName时，浏览器会直接报不支持这个方法的错。页面的html版本时HTML 4.01,请问有哪位能稍微讲解一下这个原因吗？谢谢了。

Answer 1

感谢依云和boxsnake的回答，虽然依云的回答已经足够了，但也同样感谢boxsnake提供细致的解决方案:-)
确实是浏览器兼容模式的问题，IE开启了兼容模式，打开IE开发者工具可以看到右侧有个指示当前IE版本的下拉框，居然看到的是IE5。。这个是可以通过IE的设置关闭兼容模式的，不过我这边一关闭控制台就跳出一排排红字，老项目连js加载都有问题。要解决这个问题自然就是使用ie兼容的方法了，也就是boxsnake说的polyfill。比如addEventListener要考虑IE7的attachEvent，捕获事件要使用var evt = e || window.event，冒泡，preventDefautl这些也要重新处理。大部分问题的解决方案StackOverflow里基本都有（我是伸手党，羞），只要加上ie7的后缀。但其实我觉得最好还是在api保持不变的情况下一点点把IE踢出去降低维护成本。
虽然jquery应该是能有效处理这些问题的，但如果js不熟的话，在条件允许的情况下还是老老实实走js的路吧，夯实基础很重要:-)

Answer 2

IE 处于兼容模式。请检查HTTP响应头、meta 标签以及 IE 的设置。

Answer 3

参见：CanIUse

IE8以下的是不支持这个方法的，而IE7兼容的JS文件实际的操作就是，用IE7兼容的方法自己实现某些不支持的特性，并将这些自己实现的方法命名的和原方法一致，然后将这种特性写到最上层的原型之中。由于原型链的关系，这样就相当于在IE7下也实现了功能。

比如IE7不支持getElementsByClassName，这个JS通过判断是否有这个方法，如果没有则用自己定义的同名方法（用IE7支持的方式重写的具有相同作用的getElementsByClassName方法），将它注入到原型中去。

这种方法一般被称为Polyfill，实现起来大致是这样

// 由于不知道最上层实现getElementsByClassName方法的类名，暂时称为X
if(!X.prototype.getElementsByClassName) {
    X.prototype.getElementsByClassName = function() {
        // 此处为自己实现的getElementsByClassName方法
    };
}

这样由于IE8以上的自身有这个方法，所以不会进入if判断内，而IE8及以下的版本，由于自身没有实现这个方法，就会进入判断，而判断内的代码正好补充了缺失的getElementsByClassName方法。