常见的浏览器兼容问题

HTML的兼容问题

1. H5新标签在IE9以下的浏览器不兼容
   解决方法：从外引入HTML

<!--[if It IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->

CSS的兼容性问题

1. 部分浏览器中img中存在空隙
   解决方法使用float为img布局
2. 最小高度不生效min-height
   解决方法使用heitht设置

{
	min-height:200px;
	height:200px;
	overflow:hidden;
	height:auto;!important
}

3. 外边距折叠
   当两个元素均设置外边距，margin将取最大值，舍最小值。
   解决方法使用BFC

IE6的一系列问题

1. IE6双边距问题
   IE6块级浮动后，横向margin实际值是预设值的两倍。
   解决方法设为行内元素display:inline
2. IE6的float元素间存在3px空隙
   解决方法右侧元素也设浮动float:right
3. IE6使用margin:auto无法居中
   解决方法为父元素设置text-align:center
4. IE6无法设置1px的行高
   解决方法由于IE6默认行高，设置overflow:hidden或者line-height:1px

JavaScript的兼容性问题

1. 事件绑定

• 标准的为addEventListener但IE下是attachEvent

2. 原生Ajax的创建问题

• 标准浏览器中都是XMLHttpRequest()在IE中是activeXObject()
• 一般Ajax创建时需要先进行onreadyState的事件监听，再进行open和send的触发。

3. 求窗口大小的兼容写法

• clientWidth
  可视区大小,content+padding

width = document.documentElement.clientWidth||document.body.clientWidth

• offsetWidth
  元素大小,content+padding+border

offestWidth = document.documentElement.offsetWidth||document.body.offsetWidth

• scrollWidth
  元素实际大小

scrollWidth = document.documentElement.scrollWidth||document.body.scrollWidth

其他浏览器而言

1. 不同浏览器默认padding和margin不同
   解决方法*{margin,padding:0}`
2. 对于不同浏览器使用hack兼容

• IE条件注释<!--[if It IE]>,<![endif]-->
• IE6的*或者_
• IE7的*
• IE6~IE10的9