IE瀏覽器兼容問(wèn)題的幾點(diǎn)寫法分享
發(fā)表時(shí)間：2024-05-15 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]用戶使用的瀏覽器五花八門，我們要保證每一種瀏覽器都能兼容我們的代碼，不能要求用戶去改變?yōu)g覽器，那么就得在我們的代碼上下功夫。此時(shí)我們要用到hack。HACK就是針對(duì)不同的瀏覽器寫不同的HTML、CSS樣式，從而使各種瀏覽器達(dá)到一致的渲染效果。下面我們就分別了解一下HTML的hack和CSS的hac...
用戶使用的瀏覽器五花八門，我們要保證每一種瀏覽器都能兼容我們的代碼，不能要求用戶去改變?yōu)g覽器，那么就得在我們的代碼上下功夫。此時(shí)我們要用到hack。HACK就是針對(duì)不同的瀏覽器寫不同的HTML、CSS樣式，從而使各種瀏覽器達(dá)到一致的渲染效果。
下面我們就分別了解一下HTML的hack和CSS的hack。
（一）、HTML的hack
HTML的hack由注釋<!-- -->演變而來(lái)，在高級(jí)瀏覽器中注釋不會(huì)被加載，把IE瀏覽器的兼容代碼寫在注釋中，IE瀏覽器會(huì)識(shí)別。
HTML的hack代碼模板：
注：
①用于寫兼容的注釋，標(biāo)簽內(nèi)首位都要加！感嘆號(hào)。
②單詞都寫在一對(duì)中括號(hào)中
③IE和版本號(hào)之間要加空格
④不加比較單詞，表示只兼容這一個(gè)版本；
比較單詞：lt=less than(小于)、lte=less than or equal (小于等于)、gt=great than(大于)、gte=great than or equal(大于等于)
<!--[if IE ６]><ｐ>只有IE6認(rèn)識(shí)我<／p><![endif]-->
只要記住這一個(gè)模板就知道HTML的兼容怎么寫了，下面我們列舉幾個(gè)：
<!--[if gte IE 9]>
<h1>大于等于IE9的瀏覽器能看到</h1>
<![endif]--><!--[if lte IE 8]>
<h1 class="red">您的瀏覽器版本過(guò)低，IE8及以下版本不支持新樣式，請(qǐng)更新瀏覽器</h1>
<![endif]-->單獨(dú)寫給IE6的解決兼容問(wèn)題的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樣式的層疊性，給同一個(gè)元素設(shè)置的兼容寫法必須寫在后面，否則會(huì)被層疊掉。
（1）屬性的hack
①只兼容IE6的hack
hack符：-或_，當(dāng)做前綴寫在屬性前面，中間不加空格
在屬性名前面加短橫-或者下劃線_(原理：高級(jí)瀏覽器及其他瀏覽器會(huì)認(rèn)為這個(gè)前綴符號(hào)是一個(gè)unknown property name)，未知的屬性名，不會(huì)報(bào)錯(cuò)，不予加載。
例：
background:red; //高級(jí)瀏覽器識(shí)別_background:pink; //僅IE6識(shí)別
②兼容IE6、7的hack
hack符： ` ~ ! @ # $ % ^ & * ( ) + = [ ] < > , . 中的任一字符，作為前綴寫在屬性前面
例：
background:red; //高級(jí)瀏覽器識(shí)別！background:pink; //僅IE6、7識(shí)別
③只兼容IE8的hack
hack符：\0/，必須寫在屬性值與分號(hào)之間，中間不加空格
background:red; //高級(jí)瀏覽器識(shí)別background:pink\0/; //僅IE8識(shí)別
④兼容IE8、9、10的hack
hack符：\0，必須寫在屬性值與分號(hào)之間，中間不加空格
background:red; //高級(jí)瀏覽器識(shí)別background:pink\0; //IE8、9、10識(shí)別
⑤兼容IE6、7、8、9、10
hack符：\9，必須寫在屬性值與分號(hào)之間，中間不加空格
（2）選擇器的hack
給選擇器添加hack，這個(gè)選擇器中的樣式都是IE兼容樣式，其他高級(jí)瀏覽器不識(shí)別，同理給同一個(gè)選擇器設(shè)置的兼容樣式要寫在高級(jí)瀏覽器可識(shí)別的常規(guī)樣式后面，否則會(huì)被層疊
①IE6及以下版本的hack
hack符：* html，*和html之間有空格，再加一個(gè)空格，后面寫選擇器
例：
<!--常規(guī)寫法-->
.box{
width: 200px;
height: 200px;
border-radius: 50%;
background: yellowgreen;
}
<！--兼容寫法-->* html .box{
width: 100px;
height: 100px;
background: skyblue;
}
②IE7及以下版本的hack
hack符：，英文逗號(hào)，寫在選擇器后面，不加空格
例：
.box,{
background: #999;
border: 10px solid red;
③兼容IE6以外的其他版本的hack
hack符：html>body，寫在選擇器前面，與選擇器之間有一個(gè)空格隔開(kāi)
例：
html>body .box{
background: yellow;
}
④兼容IE6、7以外的版本的hack
hack符：html>/**/或html~/**/,寫在選擇器前面，與選擇器之間有一個(gè)空格隔開(kāi)
例：
html>/**/body .box{
background: purple;
}
用一行代碼來(lái)解決CSS在,IE6,IE7,IE8,IE9,IE10 中的各種兼容性問(wèn)題。
在網(wǎng)站前端寫代碼的過(guò)程中，很多時(shí)間IE各個(gè)版本的兼容問(wèn)題很難整。現(xiàn)在百度與谷歌都有了一行解決這種兼容性的代碼了。如下面的。
辦法一
百度也應(yīng)用了這種方案去解決IE的兼容問(wèn)題
百度源代碼如下
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>
可以打開(kāi)百度，右鍵查看源碼看下！我們可以看下文件頭是否存在這樣一行代碼！
這句話的意思是強(qiáng)制使用IE7模式來(lái)解析網(wǎng)頁(yè)代碼！
在這里送上幾種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.強(qiáng)制IE8使用IE7模式來(lái)解析
10 <metahttp-equiv=“X-UA-Compatible”content=“IE=EmulateIE7″><!– IE7 mode –>
11 //或者
12 <metahttp-equiv=“X-UA-Compatible”content=“IE=7″><!– IE7 mode –>
4.強(qiáng)制IE8使用IE6或IE5模式來(lái)解析
13 <metahttp-equiv=“X-UA-Compatible”content=“IE=6″><!– IE6 mode –>
14 <metahttp-equiv=“X-UA-Compatible”content=“IE=5″><!– IE5 mode –>
5.如果一個(gè)特定版本的IE支持所要求的兼容性模式多于一種，如：
15 <metahttp-equiv=“X-UA-Compatible”content=“IE=5; IE=8″/>
以上就是IE瀏覽器兼容問(wèn)題的幾點(diǎn)寫法分享的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
