1. 程式人生 > >對於IE相容的簡單解決辦法,【相對複雜的定製網頁除外】

對於IE相容的簡單解決辦法,【相對複雜的定製網頁除外】

X-UA-Compatible是什麼?

興許有些同學都不太清楚,X-UA-Compatible是IE8的一個專有<meta>屬性,它告訴IE8採用何種IE版本去渲染網頁,在html的<head>標籤中使用。

可以在微軟官方文件獲取更多介紹。

在IE8剛推出的時候,很多網頁由於重構的問題,無法適應較高階的瀏覽器,所以使用X-UA-Compatible標籤強制IE8採用低版本方式渲染。 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
IE=edge告訴IE使用最新的引擎渲染網頁,chrome=1則可以啟用Chrome Frame 

微笑眾所周知,我們熟悉的百度老師的首頁程式碼如下:

<!Doctype html>
    <html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml>
    <head>
    <meta http-equiv="Content-Type" content=“text/html;charset=utf-8″>
    <META http-equiv="X-UA-Compatible" content=IE=Edge>
    <title
>
百度一下,你就知道 </title>
    紅色部分是強制使用Edge模式來解析網頁程式碼!也就是採用最高階的渲染模式
給大家介紹一下幾種可能會用到的IE使用模式:
1.強制使用IE5模式來解析,這個現在幾乎用不到了,畢竟版本太老了
 <meta http-equiv=“X-UA-Compatible” content=“IE=5″>
2.強制使用IE6模式來解析
 <meta http-equiv=“X-UA-Compatible” content=“IE=6″>
3.強制使用IE7模式來解析有如下兩種方式
 <meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″>
 <meta http-equiv=“X-UA-Compatible” content=“IE=7″>

4. 強制使用IE8模式來解析
 <meta http-equiv=“X-UA-Compatible” content=“IE=8″>
5. Google Chrome Frame也能讓IE用Chrome的引擎:
 <meta http-equiv=“X-UA-Compatible” content=“chrome=1″/>
6.如果一個特定版本的IE支援所要求的相容性模式為多種,如下程式碼就是IE6和IE8兩種模式:
 <meta http-equiv=“X-UA-Compatible” content=“IE=6; IE=8″/>

除此之外,我們還可以設定網站伺服器以指定預設相容性模式

如果伺服器是自己的話,可以在伺服器上定義一個自訂標頭來為它們的網站預設一個特定的檔案相容性模式。這個特定的方法取決於你的網站伺服器。下列的 web.config檔案使Microsoft Internet Information Services (IIS)能定義一個自訂標頭以自動使用IE7 mode來編譯所有網頁。

另外還有一起其他的解決方案,例如google的ie7–js中是一個JavaScript庫(解決IE與W3C標準的衝突的JS庫),使微軟的Internet Explorer的行為像一個Web標準相容的瀏覽器,支援更多的W3C標準,支援CSS2、CSS3選擇器。它修復了許多的HTML和CSS問題,並使 得透明PNG在IE5、IE6下正確顯示。

以下為google code的程式碼地址。

使IE5,IE6相容到IE7模式

使IE5,IE6,IE7相容到IE8模式

使IE5,IE6,IE7,IE8相容到IE9模式

那麼怎麼解決解決PNG顯示問題,只需將透明png圖片命名為 *-trans.png ,而美中不足的是,此方法對背景平鋪(background-repeat)和背景(background-position)無法起到任何作用,預設會佔滿整個容器。這裡也可以使用IE6 透明解決方案。