几个常见的浏览器兼容问题

最近在找工作的途中遇到浏览器兼容问题，因此特意打算总结一下。首先由于浏览器种类众多，不同的浏览器其内核亦不尽相同，故各个浏览器对网页的解析有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。目前大多数主流的框架仅支持IE9+，这就对于那些要求低端的浏览器兼容的前端工程师头疼，没有IE就没有伤害啊。
Trident内核：IE、Maxthon、TT；
Gecko内核：Netcape6+、FireFox；
Presto内核：Opera7+；
Webkit内核：Safari、Chrome。
其实兼容的问题主要是IE与我们常用浏览器的兼容，例如FireFox、Chrome,而对于IE来说，IE9及以上的兼容问题不大，主要是IE6到IE8这3个版本的兼容问题。
1.默认边距不同
使用CSS *{margin:0;padding:0;}，这是最简单常用的方法。
2.当设置的高度标签比较小时（一般小于10px），IE6和IE7的高度会超出自己设置高度
给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度
3.块属性标签浮动后，在IE6显示margin比设置的大
在float的标签样式控制中加入 display:inline;将其转化为行内属性
4.图片元素img下默认有间距
图片使用float属性来解决
5.opacity多浏览器透明度兼容问题
以透明度一半为例
{
filter: alpha(opacity=50);/IE/
-moz-opacity: 0.5;/老版Mozilla/
-khtml-opacity: 0.5;/老版Safari/
opacity: 0.5;
}
6. IE6的3px Bug
IE6里的一个标签浮动，另一个不浮动的元素自然上浮与之靠近出现3px间距，对浮动的标签设置_margin-right: -3px;来解决此问题。
关于IE和常用的测试浏览器火狐之间的兼容性
1.表单
IE：可以使用document.formName.item(“itemName”)或document.formName.elements[“elementName”]
Firefox：只能使用document.formName.elements[“elementName”]
解决方法：统一使用document.formName.elements[“elementName”]
2.集合类对象
IE：可以使用()或[]获取集合类对象;
Firefox：只能使用[]获取集合类对象.
解决方法：统一使用[]获取集合类对象.
3.自定义属性
IE：可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性
Firefox：只能使用getAttribute()获取自定义属性.
解决方法：统一通过getAttribute()获取自定义属性.
4.元素获取
IE：可以使用eval(“idName”)或getElementById(“idName”)来取得id为idName的HTML对象;
Firefox：只能使用getElementById(“idName”)来取得id为idName的HTML对象。
解决方法：统一用getElementById(“idName”)来取得id为idName的HTML对象。
5.命名重复
变量名与某HTML对象ID相同的问题
IE：HTML对象的ID可以作为document的下属对象变量名直接使用，Firefox下则不能；
Firefox：可以使用与HTML对象ID相同的变量名，IE下则不能。
解决方法：使用document.getElementById(“idName”)代替document.idName。最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时，一律加上var，以避免产生歧义。
6.const
IE：只能使用var关键字来定义变量。
Firefox：可以使用const关键字或var关键字来定义变量。
解决方法：统一使用var关键字来定义变量。
此外还有许多兼容性问题，待到遇见后进行总结。