系统前端实现多浏览器兼容
FruitHardCandy 2013-11-20
浏览器概述
浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种软件
主要工作发送用户请求，接收服务器端响应，将返回的HTML页面展现给用户。
随着web2.0的推进，以及作为核心支持技术的Ajax的普及，对JavaScript的处理也成为决定WEB页面特效及用户操作体验的重要因素，这主要取决于浏览器的内核中JavaScript引擎的表现。另外，随着用户的浏览内容的多样化，页面的渲染速度成为了评价浏览器好坏的重要因素，这是由浏览器内核中的排版引擎(Rendering Engine)决定的。
JavaScript引擎
不同JavaScript引擎性能对比
排版引擎
说明：系统对IE(IE6，IE8)、FireFox(4.0以上)、Safari、Google等四款主流浏览器兼容。
不兼容情况统计
测试方法：
采用基线回归案例（209个）
测试结果：
执行完回归案例，发现不兼容点47处
结果分析：
这里的47处并不能完全说明问题，大部分都是阻碍性缺陷，当这些缺陷修复后又涌现大量不兼容问题。以31.0版本修复23处问题，整个版本冒烟跟系统测试上报的将近70个BUG。
不兼容主要原因
var eYear = parseInt(sDate.getYear(),10);
在IE浏览器中，通过以上方法变量eYear的值可以变为2012，而在FF、Safari、Chrome浏览器下，sDate.getYear()返回的是Date对象中年份与1900年之间的差距，即112。解决此问题可以更换使用getFullYear()函数，即：var eYear = parseInt(sDate.getFullYear(),10);
在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在其他浏览器中不能
如 <select name="week" title="">
上面的这种写法在IE下执行下面语句是可以正常获取到值。
var week = document.getElementById('week').options
但是在FF等其它浏览器中不能正常获取
解决方法：
<select name="week" id="week" title="">
3、Iframe元素使用
parent.parent.frames('header');
top.frames('header‘);
现有代码中许多集合类对象取用时使用 ()，IE 能接受，FF等其它浏览器则不能。
解决方案：
parent.parent.frames['header‘];
top.frames['header‘];
var _headerWin = top.frames['header'];
var _leftObj = _headerWin.urlData['personallife']['LEFTMENU'];
这种写法在Google、Safari浏览器下会提示找不到urlData该对象，需要通过iframe下的contentWindow对象来访问
解决方案：
var _leftObj = _headerWin.contentWindow ?(
_headerWin.contentWindow.urlData['personallife']['LEFTMENU']
):(
_headerWin.urlData['personallife']['LEFTMENU']
);
4、Event事件异同
以上的写法在非IE的浏览器上不支持，获取不到event事件，需要改成以下写法：
parent.aliasInput.innerHTML=" <input type='hidden' name='alias' value='"+$("#userID").val()+"' >"
火狐及其它浏览器不支持 disabled属性
只能用css实现此功能(链接变灰)
$("#resendLink").addClass("color_999");
7、CSS @import 标记
