常见浏览器兼容性问题

前言

不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
所以浏览器兼容性问题一般指：css兼容、js兼容

一、css兼容

1. 不同浏览器的标签默认的margin和padding不同

问题症状： 随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。

解决方案：

1. CSS里 *{margin:0;padding:0;}但是性能不好
2. 一般我们会引入reset.css样式重置；

html,body,div,span,applet,object,,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	font-weight:normal;
	vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}
ol,ul,li {
	list-style:none;
}
blockquote,q {
	quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
	content:'';
	content:none;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
th,td {
	vertical-align:middle;
}
/* custom */
a {
	outline:none;
	color:#16418a;
	text-decoration:none;
	-webkit-backface-visibility:hidden;
}
a:focus {
	outline:none;
}
input:focus,select:focus,textarea:focus {
	outline:-webkit-focus-ring-color auto 0;
}

2. css3新属性，加浏览器前缀兼容早期浏览器

-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */

哪些css3属性需要加：

定义关键帧动画 @keyframes
css3中的变形（transform）、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow  盒子阴影
flex  弹性布局
....

3. 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题

问题症状: 常见症状是IE6中后面的一块被顶到下一行

解决方案： 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;

4. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

问题症状： 设置div高度小于10px，IE6、7和遨游里div的高度，超出自己设置的10px.

解决方案：

给超出高度的标签设置overflow:hidden;
或者设置行高line-height 小于你设置的高度。

5. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状： IE6里的间距比超过设置的间距

解决方案： 在display:block;后面加入display:inline;display:table;

6. IE浏览器div最小宽度和高度的问题

问题症状： IE浏览器div最小宽度和高度不生效

7. 超链接访问过后hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

8. 图片默认有间距

问题症状： 几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。

解决方案： 使用float属性为img布局(所有图片左浮)

9. css hack解决浏览器兼容性

不同浏览器，识别不同的样式，csshack本身就是处理浏览器兼容的。
下面是css hack写法：

background-color:yellow0; 0 是留给ie8的
+background-color:pink;   + ie7定了；
_background-color:orange; _专门留给神奇的ie6；

二、js兼容

1. 事件绑定
2. event事件对象问题
event.srcElement(事件源对象)问题
3. 获取元素的非行间样式值：
4. 阻止事件冒泡传播：
5. 阻止事件默认行为：
6. ajax兼容问题