常见的浏览器兼容问题

什么是浏览器的兼容性

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。所以在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示。

样式兼容性(css)

1.图片间隙

 1. div中的图片间隙
 2. bug：在块元素中插入图片时，有时图片会将块元素下方撑大三像素。
 3. Hack：给<img>添加声明：display:block

2.表单元素行高不一致(IE,MOZ,C,O,S)

 1. bug：表单元素行高对齐方式不一致
 2. hack：给表单元素添加声明：float:left;

3.鼠标指针bug

 1. 描述：cursor属性的hand属性值只有IE8浏览器识别;
 2. hack：如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;

4.万能清除浮动法

 1. 父元素选择符:after{content:"."; clear:both; display:block; height:0;
    overflow:hidden; visibility:hidden;}

5.父元素里有块元素，如果给子元素添加添加margin-top,父元素会“掉”下来（高度塌陷）

1. hack1：给父元素添加overflow：hidden；
 2. hack2：给子元素添加float；
 3. hack3：给父元素加边框； 或者用其他的方法达到我们想要的效果：如给父元素加padding-top

js事件兼容问题

1、event事件

通用方式
document.onclick=function(e){
    var e = e || window.event;   //兼容写法
}

2、一些“方法”的兼容性写法

停止事件传播
if(evt.stopPropagation){
    return evt.stopPropagation();    //一定不能漏下evt  方法前一定要写明对象
}else{
    return evt.cancelbuble();
}

阻止默认事件
if (e.preventDefault) {
     e.preventDefault();   //W3C标准
}else{
     e.returnValue = 'false';    //IE
}

获取第一个子节点（next，last都类似）
if (obj.lastElementChild) {
     return obj.firstElementChild;   //非IE6/7/8支持
} else{
     return obj.firstChild;   //IE6/7/8支持
};

设置监听事件
//参数一：对象
//参数二：事件类型
//参数三：事件处理函数
function addEvent(obj, type, fn){
     if (obj.addEventListener) {
          obj.addEventListener(type, fn, false);  //非IE
     } else{
          obj.attachEvent('on' + type, fn);  //IE
     }
}

3、event.srcElement问题

IE：event对象有srcElement属性，没有target属性；
Firefox:even对象有target属性，没有srcElement属性。

srcObj = event.srcElement ? event.srcElement : event.target;

4、firefox与IE的父元素(parentElement)的区别

IE：obj.parentElement
firefox：obj.parentNode

hack css

第一部分：什么是CSS Hack？
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

例如：

1、margin属性在ie6中显示的距离会比其他浏览器中显示的距离宽2倍，也就是说margin-left:20px;在ie6中距左侧对象的实际显示距离是40px，而在非ie6中显示的距左侧对象的距离是设置的值20px;所以要想设置一个对象距离左侧对象的距离在所有浏览器中都显示是20px的宽度的样式应为：.kwstu{margin-left:20px;_margin-left:20px;}

2、kwstu{background:green;/forfirefox/width:300px;_width:200px;}，一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;由于下划线_width只有IE6可以识别，所以此样式在IE6中实际设置对象的宽度为200px，后面的把前面的给覆盖了，而其他浏览器不识别_width不会执行_width:200px;这句样式，所以在其他浏览器中设置对象的宽度就是300px。

hack详情见：链接：https://blog.csdn.net/qq_31635733/article/details/81660897