解决浏览器兼容新问题

转载地址：http://www.shuonar.com/blog/dc5faa22-aad8-437f-b9c9-f825f8051d77.html
最近发现我的主页(www.shuonar.com)爆出了IE10兼容性问题，自己很纳闷，为什么同样是IE内核会出现兼容性问题?小心求证发现原来是因为ie10默认的渲染模式是ie10，而一般我们测试的浏览器（ie8,ie9）默认的渲染模式是ie6/7.所以在用户使用ie10的时候就会出现css无法正常显示，继而出现页面混乱的情况。
先讲讲ie兼容性问题，其实IE给出了解决方案，google也给出了解决方案，如果打开百度的源代码就会发现会多出一行
1 <metahttp-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
这句话的意思是强制使用IE7模式来解析网页代码。
2 <metahttp-equiv=“X-UA-Compatible”content=“IE=8″>这个那是强制IE8模式来解析网页代码
2. Google Chrome Frame也可以让IE用上Chrome的引擎:
<metahttp-equiv=“X-UA-Compatible”content=“chrome=1″/>
在另一方面使用另外一个方式也可实现兼容性问题
ie7 – js中是一个JavaScript库（解决IE与W3C标准的冲突的JS库），使微软的Internet Explorer的行为像一个Web标准兼容的浏览器，支持更多的W3C标准，支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、ie6下正确显示。
使IE5,IE6兼容到IE7模式（推荐）
1 <!–[if lt IE 7]>
2 <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js”type=”text/javascript”></script>
3 <![endif]–>
使IE5,IE6,IE7兼容到IE8模式
4 <!–[if lt IE 8]>
5 <script src=”http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js”type=”text/javascript”></script>
6 <![endif]–>
使IE5,IE6,IE7,IE8兼容到IE9模式
7 <!–[if lt IE 9]>
8 <script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
9 <![endif]–>
关于IE和firefox的兼容性问题，首先讲讲关于javascript兼容性问题
1. document.form.item 问题
document.formName.item("itemName")这样的语句，在firefox中不能运行
改用 document.formName.elements["elementName"]
2. 集合类对象问题
集合类对象取用时使用 ()，IE 能接受，firefox 不能。
改用[]作为下标运算.
如:document.forms(‘formName’)改document.forms[‘formName’]Document.getElementsByName(‘elementName’)如:document.getElementsByName(‘elementName’)(1)改为
document.getElementsByName(‘elementName’)[1]
3. HTML 对象的 id 作为对象名的问题
(1)现有问题
在IE中HTML对象的ID可以作为document的下属对象变量名直接使用。在Firefox中不能。
(2)解决方法
用getElementById("idName")代替idName作为对象变量使用。
4. element.fireEvent()方法问题
(1)现有问题
在IE中可以使用element.fireEvent()方法，firefox不支持
用 element.click()代替 。
2. CSS部分
转载地址：http://www.shuonar.com/blog/dc5faa22-aad8-437f-b9c9-f825f8051d77.html
1. 高度问题
(1)现有问题
如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，firefox会固定DIV的高度，超过部分超出DIV底线以外，出现和下面的内容重叠的现象
(2)解决方法：
控制恰当的高度，或者不写，让浏览器自动调节高度，或者设置overflow:hidden; 或height:auto
2. display问题
(1)现有问题
在Firefox中执行后"display:none;"没有回收"display:block;"开辟的页面空间，
下次再执行"display:block;"又会在页面上重新创建显示空间。
(2)解决方法：
将代码style.display="block";
修改为
style.display=""; 或在样式中不写，默认为block
2. 宽度问题
(1)现有问题
IE：对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox：对象的实际宽度= (margin-left) + (border-left-width) +(padding- left) + width + (padding-right) + (border-right-width) +(margin-right)
实际像素所以排列好及列的表格时ie和ff显示宽度稍有区别
(2)解决方法：
FireFox: 支持 !important, IE 则忽略,可用 !important 为　FireFox 特别设置样式．

网站兼容性测试网站：http://browsershots.org/