一.常見的瀏覽器核心可以分四種：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; //將物件作為塊元素級的表格顯示}