明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

IE瀏覽器兼容問題的幾點寫法分享

發(fā)表時間：2024-01-01 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]用戶使用的瀏覽器五花八門，我們要保證每一種瀏覽器都能兼容我們的代碼，不能要求用戶去改變?yōu)g覽器，那么就得在我們的代碼上下功夫。此時我們要用到hack。HACK就是針對不同的瀏覽器寫不同的HTML、CSS樣式，從而使各種瀏覽器達到一致的渲染效果。下面我們就分別了解一下HTML的hack和CSS的hac...
用戶使用的瀏覽器五花八門，我們要保證每一種瀏覽器都能兼容我們的代碼，不能要求用戶去改變?yōu)g覽器，那么就得在我們的代碼上下功夫。此時我們要用到hack。

HACK就是針對不同的瀏覽器寫不同的HTML、CSS樣式，從而使各種瀏覽器達到一致的渲染效果。

下面我們就分別了解一下HTML的hack和CSS的hack。

（一）、HTML的hack

HTML的hack由注釋<!-- -->演變而來，在高級瀏覽器中注釋不會被加載，把IE瀏覽器的兼容代碼寫在注釋中，IE瀏覽器會識別。

HTML的hack代碼模板：

注：

①用于寫兼容的注釋，標簽內(nèi)首位都要加！感嘆號。

②單詞都寫在一對中括號中

③IE和版本號之間要加空格

④不加比較單詞，表示只兼容這一個版本；

比較單詞：lt=less than(小于)、lte=less than or equal (小于等于)、gt=great than(大于)、gte=great than or equal(大于等于)

<!--[if IE ６]><ｐ>只有IE6認識我<／p><![endif]-->

只要記住這一個模板就知道HTML的兼容怎么寫了，下面我們列舉幾個：

<!--[if gte IE 9]>
       <h1>大于等于IE9的瀏覽器能看到</h1>
<![endif]-->
<!--[if lte IE 8]>
       <h1 class="red">您的瀏覽器版本過低，IE8及以下版本不支持新樣式，請更新瀏覽器</h1>
<![endif]-->
單獨寫給IE6的解決兼容問題的HTML代碼：<!--[if IE 6]>
     <script src="js/iepng.js?1.1.11" type="text/javascript"></script>
     <script type="text/javascript">
       EvPNG.fix('div,ul,img,li,input,span,b,h1,h2,h3,h4');
     </script>
<![endif]-->

（二）、CSS的hack

CSS的hack包括：屬性的hack和選擇器的hack

設(shè)置css的hack要注意的是css樣式的層疊性，給同一個元素設(shè)置的兼容寫法必須寫在后面，否則會被層疊掉。

（1）屬性的hack

①只兼容IE6的hack

hack符：-或_，當做前綴寫在屬性前面，中間不加空格

在屬性名前面加短橫-或者下劃線_(原理：高級瀏覽器及其他瀏覽器會認為這個前綴符號是一個unknown property name)，未知的屬性名，不會報錯，不予加載。

例：

background:red;    //高級瀏覽器識別_background:pink;    //僅IE6識別

②兼容IE6、7的hack

hack符： ` ~ ! @ # $ % ^ & * ( ) + = [ ] < > , . 中的任一字符，作為前綴寫在屬性前面

例：

background:red;    //高級瀏覽器識別！background:pink;    //僅IE6、7識別

③只兼容IE8的hack

hack符：\0/，必須寫在屬性值與分號之間，中間不加空格

background:red;    //高級瀏覽器識別background:pink\0/;    //僅IE8識別

④兼容IE8、9、10的hack

hack符：\0，必須寫在屬性值與分號之間，中間不加空格

background:red;    //高級瀏覽器識別background:pink\0;    //IE8、9、10識別

⑤兼容IE6、7、8、9、10

hack符：\9，必須寫在屬性值與分號之間，中間不加空格

（2）選擇器的hack

給選擇器添加hack，這個選擇器中的樣式都是IE兼容樣式，其他高級瀏覽器不識別，同理給同一個選擇器設(shè)置的兼容樣式要寫在高級瀏覽器可識別的常規(guī)樣式后面，否則會被層疊

①IE6及以下版本的hack

hack符：* html，*和html之間有空格，再加一個空格，后面寫選擇器

例：

<!--常規(guī)寫法-->
        .box{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: yellowgreen;
        }
<！--兼容寫法-->* html .box{
            width: 100px;
            height: 100px;
            background: skyblue;
        }

②IE7及以下版本的hack

hack符：，英文逗號，寫在選擇器后面，不加空格

例：

.box,{
    background: #999;
    border: 10px solid red;

③兼容IE6以外的其他版本的hack

hack符：html>body，寫在選擇器前面，與選擇器之間有一個空格隔開

例：

html>body .box{
    background: yellow;
}

④兼容IE6、7以外的版本的hack

hack符：html>/**/或html~/**/,寫在選擇器前面，與選擇器之間有一個空格隔開

例：

html>/**/body .box{
    background: purple;
}

用一行代碼來解決CSS在,IE6,IE7,IE8,IE9,IE10 中的各種兼容性問題。

在網(wǎng)站前端寫代碼的過程中，很多時間IE各個版本的兼容問題很難整�，F(xiàn)在百度與谷歌都有了一行解決這種兼容性的代碼了。如下面的。

辦法一

百度也應(yīng)用了這種方案去解決IE的兼容問題

百度源代碼如下

1 <!Doctype html>

2 <htmlxmlns=http://www.w3.org/1999/xhtmlxmlns:bd=http://www.baidu.com/2010/xbdml>

3 <head>

4 <metahttp-equiv=Content-Typecontent=“text/html;charset=utf-8″>

5 <metahttp-equiv=X-UA-Compatiblecontent=IE=EmulateIE7>

6 <title>百度一下，你就知道</title>

7 <script>varwpo={start:newDate*1,pid:109,page:‘superpage’}</script>

<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>

可以打開百度，右鍵查看源碼看下！我們可以看下文件頭是否存在這樣一行代碼！

這句話的意思是強制使用IE7模式來解析網(wǎng)頁代碼！

在這里送上幾種IE使用模式！

8 <metahttp-equiv=“X-UA-Compatible”content=“IE=8″>

2. Google Chrome Frame也可以讓IE用上Chrome的引擎:

9 <metahttp-equiv=“X-UA-Compatible”content=“chrome=1″/>

3.強制IE8使用IE7模式來解析

10 <metahttp-equiv=“X-UA-Compatible”content=“IE=EmulateIE7″><!– IE7 mode –>

11 //或者

12 <metahttp-equiv=“X-UA-Compatible”content=“IE=7″><!– IE7 mode –>

4.強制IE8使用IE6或IE5模式來解析

13 <metahttp-equiv=“X-UA-Compatible”content=“IE=6″><!– IE6 mode –>

14 <metahttp-equiv=“X-UA-Compatible”content=“IE=5″><!– IE5 mode –>

5.如果一個特定版本的IE支持所要求的兼容性模式多于一種，如：

15 <metahttp-equiv=“X-UA-Compatible”content=“IE=5; IE=8″/>

以上就是IE瀏覽器兼容問題的幾點寫法分享的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。