先来总结下在前端开发过程中容易遇到的一些兼容问题。
1、 块属性标签float之后，如果有横向的margin属性，在IE6显示margin比设置的值大。
解决方案：给float的元素添加display:inline属性，使其转化为行内元素。
2、 设置较小高度的标签（一般小于10px），在IE6、IE7、遨游中高度超出自己设置的高度。
解决方案：给元素添加overflow:hidden属性；或者设置line-height小于你设置的高度。
3、 多个图片在一些浏览器中出现默认间距。
解决方案：给图片元素添加float属性。
4、 标签设置min-height属性不兼容。
解决方案：如需设置标签的最小高度为300px。需要如下设置：{min-height:300px;height:auto !important;height:300px;overflow:visible;}
备注：当内容高度小于一个值（如300px），容器高度为300px，当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条时，需要考虑这个兼容问题。
5、 opacity定义元素的透明度问题。
解决方案：filter:alpha(opacity=80); /*IE支持该属性*/
opacity:.8; /*支持css3的浏览器*/
6、 文字阴影的兼容问题。
解决方案：IE：{filter:shadow(Color=#666,Direction=135,Strength=5)}
其他浏览器：{text-shadow:1px 1px 1px #666;}
7、 盒子阴影的兼容问题。
解决方案：{box-shadow:5px 5px 5px #666; -mox-box-shadow:5px 5px 5px #666; -webkit-box-shadow:5px 5px 5px #666;}
8、 定义1px高度的容器。
解决方案：overflow:hidden || zoom:0.08 || line-height:1px
备注：zoom属性设置或检索对象的缩放比例。
9、 文字与图片垂直居中。
解决方案：为文字与图片的共同父元素所有的后代元素定义*{vertical:middle;}
例：<p>我要垂直居中<img src="images/1.jpg"></p>
p*{vertical:middle;}
10、 JS浏览器兼容问题。
(1)ie不支持ClassName取标签，非ie支持
(2) 获取非ie窗口的scrolltop值通过document.body.scrollTop
获取ie窗口的scrolltop值通过document.documentElement.scrollTop
(3) 通过childNodes获取子节点，ie不能取到回车节点，非ie可以。
(4) innerText在火狐中不可用
(5) addEventListener 非ie支持，attachEvent ie专用
(6) input标签的type属性在ie6中不可修改