瀏覽器相容性問題，往往是個別瀏覽器對一些標準定義不一致導致的。
常用的瀏覽器及對應核心如下：
瀏覽器核心
ietrident
firefox
gecko
chrome
先為webkit，後為blink（與opear共同開發）
safari
webkit
opear
blink
瀏覽器相容性導致的問題：
1.不同瀏覽器對解析標籤預設的內邊距和外邊距不同
解決方式：*
2.ie6雙邊距問題；在 ie6中設定了float , 同時又設定margin , 就會出現邊距問題
解決方式：display:inline;
3.當標籤的高度設定小於10px，在ie6、ie7中會超出自己設定的高度
解決方案：超出高度的標籤設定overflow:hidden,或者設定line-height的值小於你的設定高度
5.ie9以下瀏覽器不能使用opacity
解決方法：opacity: 0.5; filter: alpha(opacity = 50); -ms-filter: 「progid:dximagetransform.microsoft.alpha(opacity = 80)」;
6.透明度相容css設定
解決方法：
.transparent_class解決方法：
8.cursor顯示手型
解決方案：統一使用cursor:pointer
9.解決 ie9 以下瀏覽器對 html5 新增標籤不識別的問題。
ie 的條件注釋僅僅針對ie瀏覽器，對其他瀏覽器無效
操作符含義
lt小於
gt大於
lte小於等於
gte不小於
!不等於
ie 屬性過濾器（較為常用的hack方法）
針對不同的 ie 瀏覽器，可以使用不同的字元來對特定的版本的 ie 瀏覽器進行樣式控制
字元例子說明_
_height：100px；
ie6可以識別
* 、+ 、!
*height：100px;
ie6 / ie7可以識別
\0/height：100px\0/;
ie8可以識別
\9height：100px\9;
ie6、7、8、9、10可以識別
瀏覽器css相容字首
-o-transform: rotate(7deg); // opera
-ms-transform: rotate(7deg); // ie
-moz-transform: rotate(7deg); // firefox
-webkit-transform: rotate(7deg); // chrome
transform: rotate(7deg); // 統一標識語句
//以下均可console.log()實驗
var winw=document.body.clientwidth||document.docuemntelement.clientwidth;//網頁可見區域寬
var winh=document.body.clientheight||document.docuemntelement.clientheight;//網頁可見區域寬
//以上為不包括邊框的寬高，如果是offsetwidth或者offsetheight的話包括邊框
var winww=document.body.scrollwidth||document.docuemntelement.scrollwidth;//整個網頁的寬
var winhh=document.body.scrollheight||document.docuemntelement.scrollheight;//整個網頁的高
var scrollheight=document.body.scrolltop||document.docuemntelement.scrolltop;//網頁被卷去的高
var scrollleft=document.body.scrollleft||document.docuemntelement.scrollleft;//網頁左捲的距離
var screenh=window.screen.height;//螢幕解析度的高
var screenw=window.screen.width;//螢幕解析度的寬
var screenx=window.screenleft;//瀏覽器視窗相對於螢幕的x座標（除了firefox）
var screenxx=window.screenx;//firefox相對於螢幕的x座標
var screeny=window.screentop;//瀏覽器視窗相對於螢幕的y座標（除了firefox）
var screenyy=window.screeny;//firefox相對於螢幕的y座標
//event事件問題
document.onclick=function(ev)
document.onclick=function()
document.onclick=function(ev)
//dom節點相關，主要相容ie 6 7 8
function nextnode(obj) else;
} function prenode(obj) else;
} function firstnode(obj) else;
} function lastnode(obj) else;
}
//通過類名獲取元素
document.getelementsbyclassname('');//ie 6 7 8不支援；
//這裡可以定義乙個函式來解決相容問題，當然別在這給我提jquery...
//第乙個為全域性獲取類名，第二個為區域性獲取類名
function byclass1(oclass);
};return arr;//注意返回的也是陣列，包含你傳入的class所有元素；
} function byclass2(parentid,oclass);
};return arr;//注意返回的也是陣列，包含你傳入的class所有元素；
}
//獲取元素的非行間樣式值
function getstyle(object,ocss) else
}
//設定監聽事件
function addevent(obj,type,fn) else;
} function removeevent(obj,type,fn) else;
}
//在這裡加個元素到瀏覽器邊緣的距離，很實用
function offsettl(obj)
return;
}
//js阻止事件傳播，這裡使用click事件為例
document.onclick=function(e)else
}
//js阻止預設事件
document.onclick=function(e)else
}
//關於event事件中的target
document.onmouseover=function(e)
//滑鼠滾輪事件
//火狐中的滾輪事件
document.addeventlistener("dommousescroll",function(event),false)
//非火狐中的滾輪事件
document.onmousewheel=function(event)
//火狐下特有的節點載入事件，就是節點載入完才執行，和onload不同
//感覺用到的不多，直接把js**放在頁面結構後面一樣能實現。。
document.addeventlistener('domcontentloaded',function ( ){},false);//dom載入完成。好像除ie6-8都可以.
瀏覽器相容性問題和解決方案
js中常遇到的瀏覽器相容問題和解決方法
瀏覽器相容性處理要點
相容性處理要點 1 doctype 影響 css 處理 2 ff 設定 padding 後，div 會增加 height 和 width，但 ie 不會，故需要用 important 多設乙個 height 和 width 3 ff 支援 important，ie 則忽略，可用 important ...
瀏覽器相容性
瀏覽器相容性是乙個很長久的話題，之所以前端需要面對瀏覽器相容性，是因為使用者的環境有不同的平台，不同的瀏覽器。不同的廠商之間為了相互競爭，對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本，不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...
瀏覽器相容性
所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段 有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前，我...