前端常見瀏覽器相容性問題解決方案

不同瀏覽器的核心不盡相同，所以各個瀏覽器對網頁的解析存在一定的差異。

瀏覽器核心主要分為兩種，一是渲染引擎，另乙個是js 引擎

所以瀏覽器相容性問題一般指：css相容、js相容

瀏覽器核心

ie瀏覽器

trident核心，也稱ie核心

chrome瀏覽器

webkit核心，現在是blink核心

firefox瀏覽器

gecko核心，俗稱firefox核心

safari瀏覽器

webkit核心

opera瀏覽器

最初是自己的presto核心，後來加入谷歌大軍，從webkit又到了blink核心

360瀏覽器

ie+chrome雙核心

獵豹瀏覽器

ie+chrome雙核心

ie核心

qq瀏覽器

trident（相容模式）+webkit（高速模式）

問題一：不同瀏覽器的標籤預設的外補丁和內補丁不同

問題二：css3新屬性，加瀏覽器字首相容早期瀏覽器

-moz-

// 火狐瀏覽器 
-webkit-
// safari, 谷歌瀏覽器等使用webkit引擎的瀏覽器 
-o-// opera瀏覽器(早期) 
-ms-
// ie

問題三：塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大

問題四：設定較小高度標籤（一般小於10px），在ie6，ie7，遨遊中高度超出自己設定高度

問題五：行內屬性標籤，設定display:block後採用float布局，又有橫行的margin的情況，ie6間距bug（類似第二種）

問題六：預設有間距

問題七：標籤最低高度設定min-height不相容 （ie6下）

解決方案：改變css屬性的排列順序:l-v-h-a

"text/css"

>
a:link 
a:visited 
a:hover 
a:active 
<
/style>

問題九：css hack解決瀏覽器相容性

舉例寫法：

background-color:yellow0;

0 是留給ie8的
+background-color:pink;
+ ie7定了；
_background-color:orange; _專門留給神奇的ie6；

1. 事件繫結

標準瀏覽器：dom.addeventlistener(『click',function(event){},false);

標準瀏覽器採用事件捕獲的方式對應ie的事件冒泡機制（即標準由最外元素至最內元素或者ie由最內元素到最外元素）最後標準方亦覺得ie這方面的比較合理，所以便將事件冒泡納入了標準，這也是addeventlistener第三個引數的由來，而且事件冒泡作為了預設值第三值預設false，表示事件冒泡方式。

如果瀏覽器不支援addeventlistener()方法, 你可以使用attachevent()方法替代。

以下例項演示了跨瀏覽器的解決方法：

var x = document.

getelementbyid
("mybtn");
if(x.addeventlistener)
else
if(x.attachevent)

2. event事件物件問題

document.

onclick
=function
(ev)
document.
onclick
=function()
document.
onclick
=function
(ev)

3. event.srcelement(事件源物件)問題

firefox:event物件有target屬性，但是沒有srcelement屬性。

解決方法：

srcobj = event.srcelement?event.srcelement:event.target;

4. 獲取元素的非行間樣式值

標準瀏覽器：window.getcomputedstyle(obj, null)['width'];

跨瀏覽器相容解決方法：

// 獲取元素屬性值的相容寫法

function
getstyle
(obj, attr)
else
}

5. 阻止事件冒泡傳播

//js阻止事件傳播，這裡使用click事件為例

document.
onclick
=function
(e)else
}

6. 阻止事件預設行為

//js阻止預設事件   一般阻止a鏈結href，form表單submit提交

document.
onclick
=function
(e)else
}

7. ajax相容問題

其他：xmlhttpreuest

在ie6以前不是用xmlhttprequest建立的，所以我們要相容ie6以前的瀏覽器要判斷他有沒有xmlhttprequest()

跨瀏覽器相容解決方法：

window.
onload
=function()
else
//2.連線伺服器,這裡加個時間引數,每次訪問位址都不一樣,瀏覽器就不用瀏覽器裡的緩衝了,但
// 但伺服器那端是不解析這個時間的
oajax.
open
("get"
,"a.txt?t="
+new
date()
.gettime()
,true);
//3.傳送
oajax.
send
(null);
//4.接受資訊
oajax.
onreadystatechange
=function()
else}}
;};}
;<
/script>

前端瀏覽器相容性問題

在前端開發的過程中我們不可避免的會遇到瀏覽器相容性問題，這也是我們必須要解決的問題。首先來了解一下為什麼存在瀏覽器相容性問題。現在的市場上有很多種類的瀏覽器，不同種類的瀏覽器的核心也不盡相同，所以不同瀏覽器對 的解析會存在差異，這就導致對頁面渲染效果不統一的問題。市場上常見的瀏覽器核心主要有四種 w...

常見瀏覽器相容性問題

概念 不同的瀏覽器對同一段 解析不同造成瀏覽器顯示效果不同，我們把這樣的問題叫做瀏覽器相容性問題 描述 塊元素float後，又設定了橫向的margin值，在ie6下顯示的margin值比設定的值要大，並且是2倍關係 解決方案 給float的塊元素新增display inline 解決方案 a 給表單...

前端瀏覽器相容性問題 一

所謂的瀏覽器相容性問題，是指因為不同的瀏覽器對同一段 有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，我們的需求是，無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統，都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。var listenere...