所谓的浏览器兼容性问题，是指因为不同的浏览器对不同的代码有不同的解析，造成页面效果显示不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
浏览器兼容性问题汇总JavaScript
1.event.srcElement问题
问题说明：
IE下，even对象有srcElement属性,但是没有target属性；
标准浏览器下（如Firefox），even对象有target属性而没有srcElement属性。
解决方法：使用srcObj = event.srcElement?event.srcElement:event.target;
或者var target = event.srcElement || event.target;
还有var ev = ev || window.event;
2.盒子模型问题
有两种和模型：IE盒子模型、标准W3C盒子模型。
盒模型：内容（content）、填充（padding）、外边距（margin）、边框（border）。
IE的content部分包含了border和padding
解决办法：
body.style{100px;border:1px;}
IE的理解为box.width = 100
标准浏览器理解为box.width = 100 + 1*2 = 102 //加上边框2px
解决：div{ margin:30px!important; margin:28px;}
注意这两个margin 的顺序不能写反，IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{margin:30px;margin: 28px;}
重复定义的话按照最后一个来执行，所以不可以只写margin: xxpx!important;
3.双边距Bug问题，float引起的（IE6）
设置为float的div在IE下设置的margin会加倍，这是一个ie6都存在的bug
解决：使用display:inline
4.超链接hover点击后失效
解决：属性使用正确的书写顺序 link visited hover active
5.CSS透明，IE5-8不支持opacity
解决：.opacity {
opacity: 0.6;
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity = 60)"; /* for IE8 */
}
6.IE6不支持PNG透明背景
解决：IE6下使用gif图片
png24的图片在IE6浏览器上出现背景，解决：做成png8
7.event.x与event.y问题
IE下，event对象有x，y属性，但是没有pageX,pageY属性；
Firefox下，event对象有pageX,pageY属性，但是没有x,y属性
解决：
使用mX(mX = event.x?event.x:event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX
8.自定义属性问题
IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；
Firefox下，只能使用getAttribute()获取自定义属性。
解决：统一通过getAttribute()获取自定义属性。
9.元素水平居中问题
FF: margin: 0 auto;
IE: 父级{ text-align: center;}
10.div的垂直居中问题
vertical-align: middle;将行距增加到和整个div一样高：line-height: 200px;然后插入文字，就垂直居中了。缺点：要控制内容不要换行。
11.div浮动IE文本产生3像素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距。
#box {
float: left;
800px;
}
#left {
float: left;
50%;
margin-right: -3px; //关键
}
#right {
50%;
}
12.IE6下图片下有空隙产生
解决这个bug有很多技巧，可以使改变html的排版，或者设置img为display: block 或者设置vertical-align属性为vertical-align属性为vertical-align:top/bottom/middle/text-bottom都可以解决。
13.li中内容超过长度后以省略号显示
此技巧适用于与IE、Opera、safari、chrom浏览器，FF暂不支持
li {
200px;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}