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