整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前言：
不同瀏覽器的內核不盡相同，所以各個瀏覽器對網頁的解析存在一定的差異。
瀏覽器內核主要分為兩種，一是渲染引擎，另一個是js 引擎
所以瀏覽器兼容性問題一般指：css兼容、js兼容
一、css兼容
1. 不同瀏覽器的標簽默認的margin和padding不同
問題癥狀： 隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率: 100%
解決方案：
CSS里 *{margin:0;padding:0;} 但是性能不好一般我們會引入reset.css樣式重置；
備注： 這個是最常見的也是最易解決的一個瀏覽器兼容性問題，所有的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%
解決方案：
給超出高度的標簽設置:hidden;
或者設置行高line-height 小于你設置的高度。
備注： 這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是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；
二、js兼容
1. 事件綁定
IE: dom.();
標準瀏覽器： dom.(‘click',(event){},false);
標準瀏覽器采用事件捕獲的方式對應IE的事件冒泡機制（即標準由最外元素至最內元素或者IE由最內元素到最外元素）最后標準方亦覺得IE這方面的比較合理，所以便將事件冒泡納入了標準，這也是第三個參數的由來，而且事件冒泡作為了默認值第三值默認false，表示事件冒泡方式。
如果瀏覽器不支持 ()方法, 你可以使用 ()方法替代。
以下實例演示了跨瀏覽器的解決方法：
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.(事件源對象)問題
IE： event對象有屬性，但是沒有target屬性；
Firefox: event對象有target屬性，但是沒有屬性。
解決方法：
srcObj = event.srcElement?event.srcElement:event.target;
3. 獲取元素的非行間樣式值：
IE: dom.[‘width’] 獲取元素高度
標準瀏覽器： window.(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：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
