常見瀏覽器相容性問題及解決方案 面試題

前言：

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

瀏覽器核心主要分為兩種：

第一種：渲染引擎

第二種：js引擎

所以瀏覽器主要相容性問題我一般分為兩大部分：css相容、js相容

核心chrome谷歌

之前webkit，已改blink核心

firefox火狐

gecko

ssfari蘋果

webkit

ietrident

opera歐朋

現已改用google chrome的blink核心

一、css相容

1.不同瀏覽器的標籤預設的margin和padding不同

解決方法：

-moz-火狐瀏覽器

-webkit-safari谷歌瀏覽器等使用webkit引擎的瀏覽器

-o-opera瀏覽器（早期）

-ms-ie

問題：常見症狀是ie6中後面的一塊被頂到下一行。

解決方案：在這個div裡面加上display:inline;

4.設定較小高度標籤（一般小於10px），在ie6，ie7，頁面中高度超出自己設定的高度

解決方案：

6.ie瀏覽器div最小寬度和高度不生效的問題

解決方案：

#box

html>body #box

我們可以簡記乙個速成口訣：l-v-h-a

a:link

a:visited
a:hover
a:active

background-color:yellow 0

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

1.時間繫結

ie：dom.attachevent();

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

2.event事件物件問題

document.

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

ie:event物件有srcelement屬性，但是沒有target屬性；

eirefox：event物件有target屬性，但是沒有srcelement屬性.

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

ie:dom.currentstyle[『width』]獲取元素高度

標準瀏覽器:window.getcomputedstyle(ibj,null)[『width』];

跨瀏覽器相容解決方法

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

function
getstyle
(obj,attr)
else
}

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

document.
onclick
=function
(e)else
}

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

document.
onclick
=function
(e)}

ie:activexobject

其他： xmlhttprequest

在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}}
;};}
;

瀏覽器相容性問題及解決方案

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

瀏覽器相容性問題及解決方案

市場上瀏覽器種類很多，不同瀏覽器的核心也不盡相同，所以各個瀏覽器對網頁的解析存在一定的差異。瀏覽器核心主要分為兩種，一是渲染引擎，另乙個是js 引擎，核心更加傾向於說渲染引擎。常見的相容性問題 1 不同瀏覽器的標籤預設的外補丁 margin 和內補丁 padding 不同 解決方案 css 裡增加萬...

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

目錄 1.最常見的 每個瀏覽器的預設margin，padding大小都不同，當設定定位時會有些許差異。2.預設有間距 當幾個img標籤放到一起時，有些瀏覽器會有預設間距，加上第一條的設定的萬用字元樣式也無用。3.min height問題 由於min height本身就是乙個不相容的css屬性，所以設...