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

2021-09-28 11:49:00 字數 1988 閱讀 2717

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

現象:

>

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

>

解決方案:

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

document.createelement

("header"

);

方案2:預設行內, 需要轉成塊級
header

但是 html5 新增了很多語義化標籤, 乙個個建立太麻煩了,html5shiv 外掛程式很好的解決這個問題:

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

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

但是在支援html5語義化標籤的瀏覽器中, 這個js的執行就沒有必要, 消耗了效能

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

css條件注釋

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

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

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

用法例項:

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

大於 ie 8 的瀏覽器才執行, 只有 ie 9 認識, 其他瀏覽器, ie 10 及以上, 都將條件注釋當成注釋

getelementsbyname()

在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)

e.stoppropagation()不支援ie 6\7\8

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...