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

對于瀏覽器兼容問題,我們應該碰到很多了,在平時寫一些頁面時,在IE8、IE9上可能好好的,當我們在IE6、IE7或者是其他的瀏覽器上再瀏覽 這些頁面時,可能會發現我們的頁面已經面目全非了,作為一名前端開發人員,這是最讓人發瘋的問題了,那么我們該怎么解決這些問題呢?

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

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

注釋不同的瀏覽器版本

(1)、支持所有的IE瀏覽器(不包括IE10標準模式)

<!–[if IE]>只有IE6,7,8,9瀏覽器顯示(IE10標準模式不支持)<![endif]–>

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

<!–[if !IE]><!–>只有非IE瀏覽器顯示(不包括IE10)<!–><![endif]–>

(3)、IE10瀏覽器

目前還沒有找到該版本瀏覽器的像<!–[if IE 9]>似的單獨注釋,但IE10做得很不錯了,就單單布局而言,頁面在IE10、FireFox、Chrome上的表現已經沒有什么區別了。

(4)、IE9瀏覽器

<!–[if IE 9]>IE9瀏覽器顯示


<![endif]–>

(5)、IE8瀏覽器

<!–[if IE 8]>IE8瀏覽器顯示


<![endif]–>

(6)、IE7瀏覽器

<!–[if IE 7]>IE7瀏覽器顯示


<![endif]–>

(7)、IE6瀏覽器

<!–[if IE 6]>IE6瀏覽器顯示


<![endif]–>

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

<!–[if lt IE 10]>IE10以下版本瀏覽器顯示(不包括IE10)


<![endif]–>

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

<!–[if lte IE 9]>IE9及IE9以下版本瀏覽器顯示(包括IE9)


<![endif]–>

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

<!–[if gt IE 6]>IE6以上版本瀏覽器顯示(不含IE6)


<![endif]–>

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

<!–[if gte IE 7]>IE7及IE7以上版本瀏覽器顯示(包含IE7)


<![endif]–>

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

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

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

[html]</div>

<div><!–[if IE 8]>

<link rel=”stylesheet” type=”text/css” href=”ie8.cdd”>

<![endif]–>

<!–[if IE 7]>

<link rel=”stylesheet” type=”text/css” href=”ie7.cdd”>

<![endif]–>

<!–[if IE 6]>

<link rel=”stylesheet” type=”text/css” href=”ie6.cdd”>

<![endif]–></div>

<div>[/html]

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

[html]</div>

<div><!–[if lt IE 7 ]><html><![endif]–>

<!–[if IE 7 ]><html><![endif]–>

<!–[if IE 8 ]><html><![endif]–>

<!–[if IE 9 ]><html><![endif]–></div>

<div>[/html]

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

lt:小于當前版本

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

gt:大于當前版本

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

好了,我們今天就到這里,大家可能已經知道怎么簡單的處理瀏覽器兼容了,那么下次我們接著介紹一些CSS Hack技術,更進一步的處理瀏覽器兼容

測試代碼:

<!DOCTYPE html>

<html>

<head>

<title> 用條件注釋判斷瀏覽器版本,解決兼容問題 </title>

<meta charset=”utf-8″/>

</head>

<body>

<!–[if IE]>只有IE6,7,8,9瀏覽器顯示(IE10標準模式不支持)


<![endif]–>

<!–[if !IE]><!–>只有非IE瀏覽器顯示(不包括IE10)


<!–><![endif]–>

<!–[if IE 9]>IE9瀏覽器顯示


<![endif]–>

<!–[if IE 8]>IE8瀏覽器顯示


<![endif]–>

<!–[if IE 7]>IE7瀏覽器顯示


<![endif]–>

<!–[if IE 6]>IE6瀏覽器顯示


<![endif]–>

<!–[if lt IE 10]>IE10以下版本瀏覽器顯示(不包括IE10)


<![endif]–>

<!–[if lte IE 9]>IE9及IE9以下版本瀏覽器顯示(包括IE9)


<![endif]–>

<!–[if gt IE 6]>IE6以上版本瀏覽器顯示(不含IE6)


<![endif]–>

<!–[if gte IE 7]>IE7及IE7以上版本瀏覽器顯示(包含IE7)


<![endif]–>

</body>

</html>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 一、如何調試 IE 瀏覽器? 在IE7以上的版本中可以通過按快捷鍵F12調出開發人員調試框,如下圖IE7以上調試工...
    dengpan閱讀 561評論 0 2
  • 做前端多年,雖然不是經常需要hack,但是我們經常會遇到各瀏覽器表現不一致的情況。基于此,某些情況我們會極不情愿的...
    大女表哥閱讀 1,126評論 0 9
  • 什么是 CSS hack 由于不同廠商的瀏覽器,比如Internet Explorer,Safari,Mozill...
    阿魯提爾閱讀 270評論 0 2
  • 一、如何調試 IE 瀏覽器 IE7以上版本自帶的開發者工具,IE6可以用border的方法;例:IE11的開發者工...
    __Qiao閱讀 1,135評論 2 17
  • 一、問答部分 1. 如何調試 IE 瀏覽器 IE7及以上版本有調試臺,可以按F12啟動。Paste_Image.p...
    _hello__world_閱讀 482評論 0 1