浏览器兼容性问题

一、使用meta标签的X-UA-Compatible属性

X-UA-Compatible是一个设置IE浏览器兼容模式的属性，在IE8浏览器之后诞生。
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1>"
默认使用Google Chrome Frame进行渲染，如果没有安装gcf则使用IE的最新内核来渲染

二、html部分

1. 部分浏览器无法使用HTML5的新标签，如，在IE9以下识别h5新标签

<!--[if lt IE 9]>
 <script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->

2. 不同浏览器各个标签的默认属性不同，可以通过设置统一的默认值

* {
  padding: 0;
  margin: 0;
}

三、css部分

1. 使用css hack
   css hack的意思是浏览器兼容,针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器

 IE的条件注释hack： 
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->          
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->

常见的css hack

color: red;
_color: red; /*for IE6*/
*color: red /*for IE7*/

2. IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍

解决： display: block;

3. IE6下图片的下方有空隙

解决方法：给img设置display:block;

4. IE6下两个float之间有3px的bug

解决办法：给右边的元素也设置float:left;

5. IE6下没有min-width的概念，其默认的width就是min-width
6. IE6下在使用margin:0 auto;无法使其居中

解决办法：为其父容器设置text-align:center;

7. 被点击过后的超链接不再具有hover和active属性

解决方法： 严格按照link ->visited->hover->active顺序书写css

8. 在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序
9. IE6下无法设置1px的行高，原因是由其默认行高引起的

解决办法：设置overflow:hidden;或者line-height:1px;

四、js部分

1. 事件监听函数不同

IE	Chrome
attachEvent(‘on’+type, handle)	addEventListener(type, handle, true)

2. 事件捕获模式不一样

IE	Chrome
事件冒泡	事件捕获和事件冒泡

3. 取消事件冒泡、默认事件不一样

IE	Chrome
event.returnValue = false	event.preventDefault()
event.cancelBubble = true	event.stopPropagation()

4. 事件和获取目标元素的方法也不同

IE	Chrome
event	window.event
event.srcElement	event.target

5. ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject

IE	Chrome
XMLHttpRequest	activeXObject

6. 获得DOM节点的父节点、子节点的方式不同

IE	Chrome
parentElement	parentNode
parentElement.children	parentNode.childNodes