用條件注釋判斷瀏覽器版本,解決相容問題

2022-08-10 17:03:08 字數 1582 閱讀 3158

對於瀏覽器相容問題,我們應該碰到很多了,在平時寫一些頁面時,在ie8、ie9上可能好好的,當我們在ie6、ie7或者是其他的瀏覽器上再瀏覽這些頁面時,可能會發現我們的頁面已經面目全非了

首先,我們寫的頁面在不同的瀏覽器上之所以會出現表現不同的問題,是因為不同的瀏覽器在解析頁面時,他們所遵循的規則並不是完全相同的。比如ie,不同的版本解析都不同,何況是不同的瀏覽器廠商,不同的核心呢。但是我們在遇到相容性問題時,應該首先檢查我們自己寫的**,看看是不是自己的問題,然後再去追究瀏覽器的問題。還有,在遇到相容性問題時,不要動不動就用css hack技術,因為css hack技術並不是w3c所推崇的,因此,不到萬不得已,盡量不要用。

好了,說了一大堆,下面我們進入正題:

注釋不同的瀏覽器版本

(1)、支援所有的ie瀏覽器(不包括ie10標準模式)

(2)、所有非ie瀏覽器(不包括ie10標準模式)

只有非ie瀏覽器顯示(不包括ie10)
(3)、ie10瀏覽器

目前還沒有找到該版本瀏覽器的像

(5)、ie8瀏覽器

(6)、ie7瀏覽器

(7)、ie6瀏覽器

(8)、ie10以下版本瀏覽器(不包括ie10)

(9)、ie9及ie9以下版本瀏覽器(包括ie9)

(10)、ie6以上版本瀏覽器(不含ie6)

(11)、ie7及ie7以上版本瀏覽器

那麼我們該怎麼運用呢?我們不可能為了相容像上面那麼寫,把整頁的內容分別寫在不同的注釋塊內。其實這裡有兩種方法:

方法1、根據不同的瀏覽器版本,載入不同的css

如我們需要分別相容ie6、7、8,我們可以這樣做

方法2、根據不同的瀏覽器版本,給html或body掛載不同的類如

最後我們看一下lt,lte,gt,gte分別表示什麼

lt:小於當前版本

lte:小於或等於當前版本,包括本身 

gt:大於當前版本

gte:大於或等於當前版本,包括本身

複製黏貼,簡單執行,試試看,測試**:

doctype html

>

<

html

>

<

head

>

<

title

> 用條件注釋判斷瀏覽器版本,解決相容問題

title

>

<

meta

charset

="utf-8"

/>

head

>

<

body

>

只有非ie瀏覽器顯示(不包括ie10)<

hr/>

body

>

html

>

**:

收集 條件注釋判斷瀏覽器版本

除ie外都可識別 專案範例說明 if ie not運算子。這是擺立即在前面的功能,操作員,或子表示式扭轉布林表示式的意義。lt if lt ie 5.5 小於運算子。如果第乙個引數小於第二個引數,則返回true。lte if lte ie 6 小於或等於運算。如果第乙個引數是小於或等於第二個引數,則...

使用條件注釋判斷 IE 瀏覽器版本

ie條件注釋是一種特殊的html注釋,這種注釋只有ie5.0及以上版本才能理解。比如普通的html注釋是 而只有ie可讀的ie條件注釋是 非ie條件注釋 non ie html code 非特定版本ie條件注釋 很少用到 code for browsers that match the if con...

條件注釋判斷IE瀏覽器

我們把對ie的判斷放在第一,因為ie的使用者最多,其次是判斷firefox。按使用者多少的順序來判斷瀏覽器型別,可以提高判斷效率,少做無用功。之所以將chrome放在第三判斷,是因為我們 chrome很快會成為市場占有率第三的瀏覽器。其中,在分析瀏覽器版本時,用到了正規表示式來析取其中的版本資訊。除...