不同瀏覽器的核心不盡相同，所以各個瀏覽器對網頁的解析存在一定的差異。
瀏覽器核心主要分為兩種，一是渲染引擎，另一個是js 引擎
所以瀏覽器相容性問題一般指：css相容、js相容
| 瀏覽器 | 核心（渲染引擎） |
|---|---|
| Chrome谷歌 | 之前Webkit，已改Blink核心 |
| FireFox火狐 | Gecko |
| Safari蘋果 | Webkit |
| IE | Trident |
| Opera歐朋 | 現已改用Google Chrome的Blink核心 |
1. 不同瀏覽器的標籤預設的margin和padding不同
問題症狀： 隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率: 100%
解決方案：
*{margin:0;padding:0;} 但是效能不好備註： 這個是最常見的也是最易解決的一個瀏覽器相容性問題，所有的CSS檔案開頭都會用樣式重置各個標籤的內外修補程式是0。
2. css3新屬性，加瀏覽器字首相容早期瀏覽器
-moz-/* 火狐瀏覽器 /
-webkit-/ Safari, 谷歌瀏覽器等使用Webkit引擎的瀏覽器 /
-o-/ Opera瀏覽器(早期) /
-ms-/ IE */
哪些css3屬性需要加：
定義關鍵幀動畫 @keyframes
css3中的變形（transform）、過渡(transtion)、動畫(animation)
border-radius 圓角
box-shadow 盒子陰影
flex 彈性佈局
....
使用：
.myClass {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn; /* 不帶字首的放到最後 */
}
/* 複雜屬性 keyframes */
@-webkit-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不帶字首的放到最後 */
@keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
3. 塊屬性標籤float後，又有橫行的margin情況下，IE 瀏覽器margin加倍的問題
問題症狀: 常見症狀是IE6中後面的一塊被頂到下一行
解決方案： 設定為float的div在ie下設定的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div裡面加上display:inline;
<divid=」imfloat」>
相應的css為
# imfloat{
float:left;
margin:5px;//IE下理解為10px
display:inline;//IE下再理解為5px}
備註： 我們最常用的就是div+CSS佈局了，而div就是一個典型的塊屬性標籤，橫向佈局的時候我們通常都是用div float實現的，橫向的間距設定如果用margin實現，這就是一個必然會碰到的相容性問題。
4. 設定較小高度標籤（一般小於10px），在IE6，IE7，遨遊中高度超出自己設定高度
問題症狀： 設定div高度小於10px，IE6、7和遨遊裡div的高度，超出自己設定的10px.
碰到頻率： 60%
解決方案：
備註： 這種情況一般出現在我們設定小圓角背景的標籤裡。出現這個問題的原因是IE8之前的瀏覽器都會給標籤一個最小預設的行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到預設的行高。
5. 行內屬性標籤，設定display:block後採用float佈局，又有橫行的margin的情況，IE6間距bug
問題症狀： IE6裡的間距比超過設定的間距
碰到機率： 20%
解決方案： 在display:block;後面加入display:inline;display:table;
備註： 行內屬性標籤，為了設定寬高，我們需要設定display:block;(除了input/img標籤比較特殊)。在用float佈局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標籤，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe
6. IE瀏覽器div最小寬度和高度的問題
問題症狀： IE瀏覽器div最小寬度和高度不生效
IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器裡這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設定寬度和高度。
比如要設定背景圖片，這個最小寬度是比較重要的。要解決這個問題，可以這樣：
#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
7. 超連結存取過後hover樣式就不出現的問題
被點選存取過的超連結樣式不在具有hover和active了,很多人應該都遇到過這個問題,解決技巧是改變CSS屬性的排列順序: L-V-H-A
Code:
<style type="text/css">
a:link {}
a:visited {}
a:hover {}
a:active {}
</style>
8. 圖片預設有間距
問題症狀： 幾個img標籤放在一起的時候，有些瀏覽器會有預設的間距，萬用字元清除間距也不起作用。
碰到機率： 20%
解決方案： 使用float屬性為img佈局(所有圖片左浮)
備註： 因為img標籤是行內屬性標籤，所以只要不超出容器寬度，img標籤都會排在一行裡，但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道。
9. css hack解決瀏覽器相容性
不同瀏覽器，識別不同的樣式，csshack本身就是處理瀏覽器相容的。
下面是css hack寫法：
background-color:yellow0; 0 是留給ie8的
+background-color:pink; + ie7定了；
_background-color:orange; _專門留給神奇的ie6；
1. 事件繫結
IE: dom.attachEvent();
標準瀏覽器： dom.addEventListener(‘click',function(event){},false);
標準瀏覽器採用事件捕獲的方式對應IE的事件冒泡機制（即標準由最外元素至最內元素或者IE由最內元素到最外元素）最後標準方亦覺得IE這方面的比較合理，所以便將事件冒泡納入了標準，這也是addEventListener第三個引數的由來，而且事件冒泡作為了預設值第三值預設false，表示事件冒泡方式。
如果瀏覽器不支援 addEventListener()方法, 你可以使用 attachEvent()方法替代。
以下範例演示了跨瀏覽器的解決方法：
var x = document.getElementById("myBtn");
if (x.addEventListener) { //所有主流瀏覽器，ie9+
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早 IE 版本
x.attachEvent("onclick", myFunction);
}
2. event事件物件問題
document.onclick=function(ev){//谷歌火狐的寫法，IE9以上支援，往下不支援；
var e=ev;
console.log(e);
}
document.onclick=function(){//谷歌和IE支援，火狐不支援；
var e=event;
console.log(e);
}
document.onclick=function(ev){//相容寫法；
var e=ev||window.event;
var mouseX=e.clientX;//滑鼠X軸的座標
var mouseY=e.clientY;//滑鼠Y軸的座標
}
2. event.srcElement(事件源物件)問題
IE： event物件有srcElement屬性，但是沒有target屬性；
Firefox: event物件有target屬性，但是沒有srcElement屬性。
解決方法：
srcObj = event.srcElement?event.srcElement:event.target;
3. 獲取元素的非行間樣式值：
IE: dom.currentStyle[‘width’] 獲取元素高度
標準瀏覽器： window.getComputedStyle(obj, null)['width'];
跨瀏覽器相容解決方法：
// 獲取元素屬性值的相容寫法
function getStyle(obj,attr){
if(obj.currentStyle){
//相容IE
obj.currentStyle[attr];
return obj.currentStyle[attr];
}else{
//非IE，
return window.getComputedStyle(obj, null)[attr];
}
}
4. 阻止事件冒泡傳播：
//js阻止事件傳播，這裡使用click事件為例
document.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C標準
}else{
e.cancelBubble=true;//IE....
}
}
5. 阻止事件預設行為：
//js阻止預設事件 一般阻止a連結href，form表單submit提交
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C標準
}else{
e.returnValue='false';//IE..
}
}
6. ajax相容問題
IE： ActiveXObject
其他： xmlHttpReuest
在IE6以前不是用XMLHttpRequest建立的，所以我們要相容ie6以前的瀏覽器要判斷他有沒有XMLHttpRequest()
跨瀏覽器相容解決方法：
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
//1.建立ajax物件
//只支援非IE6瀏覽器
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
//alert(new XMLHttpRequest());
}else{
//只支援IE6瀏覽器
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.連線伺服器,這裡加個時間引數,每次存取地址都不一樣,瀏覽器就不用瀏覽器裡的緩衝了,但
// 但伺服器那端是不解析這個時間的
oAjax.open("get","a.txt?t=" + new Date().getTime(),true);
//3.傳送
oAjax.send(null);
//4.接受資訊
oAjax.onreadystatechange = function(){
//瀏覽器與伺服器之間的互動,進行到哪一步了,當等於4的時候,代表讀取完成了
if(oAjax.readyState==4){
//狀態碼,只有等於200,代表接受完成,並且成功了
if(oAjax.status==200){
alert("成功" + oAjax.responseText);
}else{
alert("失敗");
}
}
};
};
};
</script>