前端開發 瀏覽器相容問題總結

ie8 以下版本不支援html5語義化標籤

現象：

>
我是header標籤， 我應該獨佔一整行header
>

方案1： 在瀏覽器解析標籤之前, 動態建立一下 header 標籤, 瀏覽器就認識了

document.createelement

("header"
);

header

方案3：html5shiv解決相容性問題

在head中 引入 html5shiv 外掛程式包即可解決 ie 8 不識別 html5 語義化標籤的問題

所以我們可以通過css ie條件注釋做相容性處理

css條件注釋

css ie條件注釋 專門用於相容ie 低版本

所以只有 ie9 及 ie9以下版本 才認識，其他版本的瀏覽器或者 ie10以上 的版本會當成注釋, 不會解析

它裡面有判斷ie版本的方式：

用法例項:

在小於等於 ie 8 的瀏覽器中才會執行, 在ie9 中, 就是普通的注釋, 不會解析執行：

在ie和opera中， getelementsbyname() 方法還會返回那些id為指定值的元素。

document.getelementsbyclassname(『類名』)

ie9+支援

document.queryselector(『選擇器』);

ie8+支援

innertext 和 innerhtml的相容問題

獲取子節點

firstelementchild和lastelementchild 獲取子元素的第乙個節點和最後乙個節點。

ie9+支援

解決：children(0) 返回第1個

addeventlistener

ie9以上支援

ie9以下使用attchevent()代替

事件物件 event

ie 6、7、8無法獲取事件物件的相容性寫法

box.

onclick
=function
(e)

ie8以下使用e.cancelbubble = true;

相容性寫法

if

(e && e.stoppropagation)
else

需要注意的是，頁面被卷去的頭部，有相容性問題，因此被卷去的頭部通常有如下幾種寫法：

宣告了 dtd，使用 document.documentelement.scrolltop

未宣告 dtd，使用 document.body.scrolltop

新方法 window.pageyoffset和 window.pagexoffset，ie9 開始支援

function

getscroll()
;} 使用的時候 getscroll()
.left

前端瀏覽器相容問題

一 ie和谷歌相容性問題 在頭標籤裡面加 此方法可以解決大部分的相容性問題 這串 的意思是強制ie使用chrome frame去渲染 為防止此標籤失效，在此標籤之前最好不要寫任何標籤 二 各種標籤之間的magin和padding不一致 在乙個頁面沒有任何設定，只有原始的幾個標籤的情況下，各種標籤之間...

瀏覽器相容問題總結

一 dom篇 ie中所有的dom物件都是又com物件的形式實現的，ie不能訪問node型別，dom中每個節點的nodetyoe屬性 元素 屬性 文字 對應com中的數值 1，2，3 ie和其他瀏覽器對自定義屬性的查詢結果不同 e在解析節點的過程中不會包括空白節點，使用childnodes遍歷節點的過...

瀏覽器相容問題總結

html js css html一般是舊的瀏覽器版本不相容新的瀏覽器的新特性 js 中事件流dom2級事件，1 非ie瀏覽器新增事件 dom.addeventlistener click function true dom.removeeventlistener ie瀏覽器新增事件 dom.atta...