前端知识总结--浏览器不兼容问题知识

一.常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit

（1）不同浏览器内核不同：

使用Trident内核的浏览器：IE、Maxthon、TT；
使用Gecko内核的浏览器：Netcape6及以上版本、FireFox；
使用Presto内核的浏览器：Opera7及以上版本；
使用Webkit内核的浏览器：Safari、Chrome

（2）各浏览器内核：

IE浏览器：Trident内核，也成为IE内核
Chrome浏览器：Webkit内核，现在是Blink内核
Firefox浏览器：Gecko内核，俗称Firefox内核
Safari浏览器：Webkit内核
Opera浏览器：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
360浏览器：IE+Chrome双内核
猎豹浏览器：IE+Chrome双内核
百度浏览器：IE内核
QQ浏览器：Trident（兼容模式）+Webkit（高速模式）

二.浏览器兼容问题

一般分为HTML，Javascript兼容，CSS兼容
其中html相关问题比较容易处理，无非是高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析

三.兼容性问题分类：

1.css兼容性问题：

(1)不同浏览器的标签默认的外补丁(margin)和内补丁(padding)不同:
解决方案：css里 *{margin:0;padding:0;}

(2)IE6双边距问题: 在IE6中设置了float,同时又设置横行的margin,就会出现边距问题
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

(3)当标签的高度较小，一般设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度

(4)行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6里的间距比超过设置的间距
解决方案：在display:block;后面加入display:inline;display:table;

(5)图片默认有间距，几个img标签放在一起的时候，有些浏览器会有默认的间距，加上问题一中提到的通配符也不起作用。
解决方案：使用float属性为img布局（img标签是行内标签，只要不超出容器宽度，img会排在一行，部分浏览器的img标签之间会有个间距，去掉这个间距使用float）

(6)标签最低高度设置min-height不兼容
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

(7)IE9一下浏览器不能使用opacity
解决方案：

   opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

(8)边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

(9)cursor:hand 显示手型在safari、FireFox等上不支持
解决方案：统一使用 cursor:pointer

(10)两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative

（11）超链接访问过后 样式就混乱了，hover样式不出现了。其实主要是其CSS属性的排序问题。
解决方案：最好按照这个顺序：L-V-H-A

		  a:link{} a:visited{} a:hover{} a:active{}

（12）chrome下默认会将小于12px的文本强制按照12px来解析
解决办法是给其添加属性：-webkit-text-size-adjust: none;

（13）由于浮动引起的无法识别父盒子高度问题

解决方案：6种清除浮动的方法

清除浮动方法1：给浮动的元素的祖先元素加高度。有高度的盒子，才能关住浮动。
清除浮动方法2：clear:both;但是有致命缺陷，margin失效。
清除浮动方法3：隔墙法。在两个浮动的div间增加一个空div，就像一个屏障隔开了2个浮动，使两个浮动间互不影响。缺点: 额外增加了很多的标签，对页面结构及其的不好。
清除浮动方法4：overflow:hidden;zoom：1； 缺点： 里面尽肯能的不能有定位。 如果有定位，可能会切掉一部分。
清除浮动方法5：利用after伪类清除浮动

			.clearfix:after{
				 content:"";    内容
				 visibility:hidden;  隐藏  
				  height:0;         高度一定是0
				  display:block;     转换
				  clear:both;       清除浮动
					  }
			.clearfix{
				  zoom:1;   为了照顾ie6
				 }

清除浮动方法6:利用before 和 after 伪类清除浮动

			.clearfix:before,.clearfix:after{
			  		   content:””;
 						  display:table;  /*转换为表格模式  css3 新加*/
							} 
					.clearfix:after{
						   clear:both;
							  }
					   .clearfix{
					    *zoom:1;
						    } 

（14）行内块元素之间空白缝隙的问题：
解决方案：
1.利用margin 负值，例如Margin-left:-8px;
2.把行内块写到一行上去。
3.给父盒子加:font-size:0;
4.利用js来清除缝隙

(15 )两种盒子模式：IE盒子模式和W3C标准模式
举例：一个盒子的 margin 为 20px，border 为 5px，padding 为 10px，content 的宽为 200px，
如果用标准 W3C 盒子模型解释，那么这个盒子需要占据的位置为：宽 202 +52+102+200=270px，盒子的实际宽度为：52+102+200=230px；
如果用IE 盒子模型，那么这个盒子需要占据的位置为：宽 202+200=240px，盒子的实际宽度依然是： 200px

2.js兼容性问题：

（1）children与childNodes：IE提供的children、childNodes和firefox下的childNodes的行为是有区别的：
firefox下childNodes会把换行和空白字符都算作父节点的子节点，而IE的childNodes和children不会

（2）firefox和ie的事件：window.event只能在IE下使用，而不能用在Firefox下，这是因为Firefox的event只能在事件发生的现场使用。
Firefox必须从源处加入event作参数传递。IE忽略该参数，用window.event来读取该event
解决方案：event = event || window.event;

（3）event.x与event.y问题（IE下,event对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. ）
解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

四.使用技巧：

（1）越少的浮动，就会越少的代码，会有更灵活的页面，会有扩展性更强的页面

（2）使一个div层居中于浏览器中：增加代码margin: 0 auto

（3）万能float 闭合

将以下代码加入Global CSS 中,给需要闭合的div加上class=”clearfix”
			/* Clear Fix */ 
			.clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; } 
			.clearfix { display:inline-block; } 
			/* Hide from IE Mac */ 
			.clearfix {display:block;} 
			/* End hide from IE Mac */ 
			/* end of clearfix */
	或者这样设置：.hackbox{display:table; //将对象作为块元素级的表格显示}