面试准备兼容性

1、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。

//解决方案：
var page = {};
page.x = event.x ? event.x : event.pageX;
page.y = event.y ? event.y:event.pageY;

Chrome 中文界面下默认会将小于12px的文本强制按照12px显示,可通过加入CSS属性-webkit-text-size-adjust: none; 解决。
超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
2、请分别封装添加事件和移除事件的函数，用以解决兼容性问题？

function addEvent(elem, eventName, handler) {
　　if (elem.attachEvent) {
　　　　elem.attachEvent("on" + eventName,function(){
　　　　　　handler.call(elem)}); 　 //此处使用回调函数call()，让this指向elem　　
  } else if (elem.addEventListener) {
　　    elem.addEventListener(eventName, handler, false);　　
  }
}
function removeEvent(elem, eventName, handler) {
  if (elem.detachEvent) {
  　　elem.detachEvent("on" + eventName,function(){
  　　　   handler.call(elem)}); 　　　　//此处使用回调函数call()，让this指向elem　　
  } else if (elem.removeEventListener) {
  　　elem.removeEventListener(eventName, handler, false);　　
  }
}
//IE提供了attachEvent和detachEvent两个接口，而Firefox提供的是addEventListener和removeEventListener。

3、阻止事件冒泡的兼容性是什么
4、块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大问题表现：IE6后面的一块被顶到下一行解决方案：在float的标签样式控制中加入display:inline;转化为行内属性备注：横向浮动的div布局，使用上margin进行边界设置时，必然会碰到此问题

见此博客的总结https://www.jianshu.com/p/f971aae86f4d