Windows系統(tǒng)下各瀏覽器兼容性

------------------------------------------------------------------------Windows系統(tǒng)下各瀏覽器兼容性Windows系統(tǒng)下各瀏覽器常用CSSHACK匯總表1.此匯總表中測(cè)試瀏覽器的版本為：

微軟系統(tǒng)自帶：IE6、IE7、IE8

火狐：Firefox3.6.6

Safari：Safari5.0

谷歌瀏覽器：Chrome6.0.458.1dev

Opera瀏覽器：Opera10.602.其中，多數(shù)CSShack是在selector{property:value;}基礎(chǔ)上更改的。

selector代表CSS選擇器，property代表CSS特性，value代表特性的值。3.FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera4.Q代表QuirksMode，S代表StandardsMode。5.HackType列的數(shù)字，指的是上面CSShack的實(shí)現(xiàn)方式中的列表號(hào)。

1是指“利用瀏覽器對(duì)相同代碼的解析和支持的不同實(shí)現(xiàn)的hack”，2是指以Firefox或Webkit特有的擴(kuò)展樣式實(shí)現(xiàn)的hack。一定遵守CSShack的三條原則。CSShack是沒(méi)有辦法的時(shí)候才使用的解決兼容性問(wèn)題的招術(shù)，是用兼容性問(wèn)題去解決兼容性問(wèn)題，無(wú)異于飲鴆止渴。切莫一有兼容性問(wèn)題就使用，時(shí)刻記得改掉用CSShack修補(bǔ)的問(wèn)題。IE6、IE7、IE8、Firefox兼容性CSSHACK代碼+示例1.區(qū)別IE和非IE瀏覽器CSSHACK代碼

#divcss5{

background:blue;/*非IE背景藍(lán)色*/

background:red\9;/*IE6、IE7、IE8背景紅色*/

}2.區(qū)別IE6,IE7,IE8,FFCSSHACK

【區(qū)別符號(hào)】：「\9」、「*」、「_」

【示例】：

#divcss5{

background:blue;/*Firefox背景變藍(lán)色*/

background:red\9;/*IE8背景變紅色*/

*background:black;/*IE7背景變黑色*/

_background:orange;/*IE6背景變橘色*/

}

【說(shuō)明】：因?yàn)镮E系列瀏覽器可讀「\9」，而IE6和IE7可讀「*」(米字號(hào))，另外IE6可辨識(shí)「_」(底線)，因此可以依照順序?qū)懴聛?lái)，就會(huì)讓瀏覽器正確的讀取到自己看得懂得CSS語(yǔ)法，所以就可以有效區(qū)分IE各版本和非IE瀏覽器(像是Firefox、Opera、GoogleChrome、Safari等)。3.區(qū)別IE6、IE7、Firefox(EXP1)

【區(qū)別符號(hào)】：「*」、「_」

【示例】：

#divcss5{

background:blue;/*Firefox背景變藍(lán)色*/

*background:black;/*IE7背景變黑色*/

_background:orange;/*IE6背景變橘色*/

}

【說(shuō)明】：IE7和IE6可讀「*」(米字號(hào))，IE6又可以讀「_」(底線)，但是IE7卻無(wú)法讀取「_」，至于Firefox(非IE瀏覽器)則完全無(wú)法辨識(shí)「*」和「_」，因此就可以透過(guò)這樣的差異性來(lái)區(qū)分IE6、IE7、Firefox4.區(qū)別IE6、IE7、Firefox(EXP2)

【區(qū)別符號(hào)】：「*」、「!important」

【示例】：

#divcss5{

background:blue;/*Firefox背景變藍(lán)色*/

*background:green!important;/*IE7背景變綠色*/

*background:orange;/*IE6背景變橘色*/

}

【說(shuō)明】：IE7可以辨識(shí)「*」和「!important」，但是IE6只可以辨識(shí)「*」，卻無(wú)法辨識(shí)「!important」，至于Firefox可以讀取「!important」但不能辨識(shí)「*」因此可以透過(guò)這樣的差異來(lái)有效區(qū)隔IE6、IE7、Firefox。5.區(qū)別IE7、Firefox

【區(qū)別符號(hào)】：「*」、「!important」

【示例】：

#divcss5{

background:blue;/*Firefox背景變藍(lán)色*/

*background:green!important;/*IE7背景變綠色*/

}

【說(shuō)明】：因?yàn)镕irefox可以辨識(shí)「!important」但卻無(wú)法辨識(shí)「*」，而IE7則可以同時(shí)看懂「*」、「!important」，因此可以兩個(gè)辨識(shí)符號(hào)來(lái)區(qū)隔IE7和Firefox。6.區(qū)別IE6、IE7(EXP1)

【區(qū)別符號(hào)】：「*」、「_」

【示例】：

#tip{

*background:black;/*IE7背景變黑色*/

_background:orange;/*IE6背景變橘色*/

}

【說(shuō)明】：IE7和IE6都可以辨識(shí)「*」(米字號(hào))，但I(xiàn)E6可以辨識(shí)「_」(底線)，IE7卻無(wú)法辨識(shí)，透過(guò)IE7無(wú)法讀取「_」的特性就能輕鬆區(qū)隔IE6和IE7之間的差異。7.區(qū)別IE6、IE7(EXP2)

【區(qū)別符號(hào)】：「!important」

【示例】：

#divcss5{

background:black!important;/*IE7背景變黑色*/

background:orange;/*IE6背景變橘色*/

}【說(shuō)明】：因?yàn)镮E7可讀取「!important;」但I(xiàn)E6卻不行，而CSS的讀取步驟是從上到下，因此IE6讀取時(shí)因無(wú)法辨識(shí)「!important」而直接跳到下一行讀取CSS，所以背景色會(huì)呈現(xiàn)橘色。8.區(qū)別IE6、Firefox

【區(qū)別符號(hào)】：「_」

【示例】：

#divcss5{

background:black;/*Firefox背景變黑色*/

_background:orange;/*IE6背景變橘色*/

}【說(shuō)明】：因?yàn)镮E6可以辨識(shí)「_」(底線)，但是Firefox卻不行，因此可以透過(guò)這樣的差異來(lái)區(qū)隔Firefox和IE6，有效達(dá)成CSShack。以上包括了IE6\IE8\IE7\火狐瀏覽器兼容問(wèn)題及解決方法。CSSHack匯總快查(CSS兼容代碼演示)以下是常用CSSHACK問(wèn)題及解決代碼-DIV+CSS網(wǎng)支持1、屏蔽IE瀏覽器（也就是IE下不顯示）

*:lang(zh)select{font:12px!important;}/*FF的專用*/

select:empty{font:12px!important;}/*safari可見(jiàn)*/

這里select是選擇符，根據(jù)情況更換。第二句是MAC上safari瀏覽器獨(dú)有的。

2、僅IE7識(shí)別hack

*+html{…}

當(dāng)面臨需要只針對(duì)IE7做樣式的時(shí)候就可以采用這個(gè)HACK。

3、IE6及IE6以下識(shí)別CSSHACK

*html{…}

這個(gè)地方要特別注意很多地主都寫(xiě)了是IE6的HACK其實(shí)IE5.x同樣可以識(shí)別這個(gè)HACK。其它瀏覽器不識(shí)別。

html/**/>bodyselect{……}

這句與上一句的作用相同。

4、僅IE6不識(shí)別divhack

select{display/*IE6不識(shí)別*/:none;}

這里主要是通過(guò)CSS注釋分開(kāi)一個(gè)屬性與值，流釋在冒號(hào)前。

5、僅IE6識(shí)別支持

.yangshi{_height:20px;}

這里IE6支持識(shí)別CSS屬性前“_”短下劃線。6、僅IE6與IE5不識(shí)別

select/**/{display/*IE6,IE5不識(shí)別*/:none;}

這里與上面一句不同的是在選擇符與花括號(hào)之間多了一個(gè)CSS注釋。

7、僅IE5不識(shí)別

select/*IE5不識(shí)別*/{display:none;}

這一句是在上一句中去掉了屬性區(qū)的注釋。只有IE5不識(shí)別

8、盒模型解決方法

selct{width:IE5.x寬度;voice-family:"\"}\"";voice-family:inherit;width:正確寬度;}

盒模型的清除方法不是通過(guò)!important來(lái)處理的。這點(diǎn)要明確。

9、清除浮動(dòng)

select:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

在Firefox中，當(dāng)子級(jí)都為浮動(dòng)時(shí)，那么父級(jí)的高度就無(wú)法完全的包住整個(gè)子級(jí)，那么這時(shí)用這個(gè)清除浮動(dòng)的HACK來(lái)對(duì)父級(jí)做一次定義，那么就可以解決這個(gè)問(wèn)題。

10、截字省略號(hào)

select{-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}

這個(gè)是在越出長(zhǎng)度后會(huì)自行的截掉多出部分的文字，并以省略號(hào)結(jié)尾，很好的一個(gè)技術(shù)。只是目前Firefox并不支持。

11、只有Opera識(shí)別

@mediaalland(min-width:0px){select{……}}

針對(duì)Opera瀏覽器做單獨(dú)的設(shè)定。

以上都是寫(xiě)CSS中的一些HACK，這些都是用來(lái)解決局部的兼容性問(wèn)題，如果希望把兼容性的內(nèi)容也分離出來(lái)，不妨試一下下面的幾種過(guò)濾器。這些過(guò)濾器有的是寫(xiě)在CSS中通過(guò)過(guò)濾器導(dǎo)入特別的樣式，也有的是寫(xiě)在HTML中的通過(guò)條件來(lái)鏈接或是導(dǎo)入需要的補(bǔ)丁樣式。12、IE的if條件Hack

<!--[ifIE]>OnlyIE<![endif]-->

所有的IE可識(shí)別

<!--[ifIE5.0]>OnlyIE5.0<![endif]-->

只有IE5.0可以識(shí)別

<!--[ifgtIE5.0]>OnlyIE5.0+<![endif]-->

IE5.0包換IE5.5都可以識(shí)別

<!--[ifltIE6]>OnlyIE6-<![endif]-->

僅IE6可識(shí)別

<!--[ifgteIE6]>OnlyIE6/+<![endif]-->

IE6以及IE6以下的IE5.x都可識(shí)別

<!--[iflteIE7]>OnlyIE7/-<![endif]-->

僅IE7可識(shí)別

13、僅IE8兼容識(shí)別

div{height:20px\9;}

這里的“\9”僅IE8支持識(shí)別解決PNG圖片在IE6中背景不透明方1、解決PNG圖片在IE6中背景不透明的CSS與JS代碼

-

TOP

JS代碼

functioncorrectPNG()//correctlyhandlePNGtransparencyinWinIE5.5&6.

{

vararVersion=navigator.appVersion.split("MSIE")

varversion=parseFloat(arVersion[1])

if((version>=5.5)&&(document.body.filters))

{

for(varj=0;j<document.images.length;j++)

{

varimg=document.images[j]

varimgName=img.src.toUpperCase()

if(imgName.substring(imgName.length-3,imgName.length)=="PNG")

{

varimgID=(img.id)?"id='"+img.id+"'":""

varimgClass=(img.className)?"class='"+img.className+"'":""

varimgTitle=(img.title)?"title='"+img.title+"'":"title='"+img.alt+"'"

varimgStyle="display:inline-block;"+img.style.cssText

if(img.align=="left")imgStyle="float:left;"+imgStyle

if(img.align=="right")imgStyle="float:right;"+imgStyle

if(img.parentElement.href)imgStyle="cursor:hand;"+imgStyle

varstrNewHTML="<span"+imgID+imgClass+imgTitle

+"style=\""+"width:"+img.width+"px;height:"+img.height+"px;"+imgStyle+";"

+"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"

+"(src=\'"+img.src+"\',sizingMethod='scale');\"></span>"

img.outerHTML=strNewHTML

j=j-1

}

}

}

}

window.attachEvent("onload",correctPNG);

CSS代碼：

#id{background:url(圖片路徑);_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src="圖片路徑");_background:none;}

2、解決png圖片在html中IMG標(biāo)簽使用PNG圖片IE6中背景不透明方法

-

TOP

1、新建一個(gè)JS文件為iepngfx.js,進(jìn)以上JS代碼拷貝到JS文件里

2、在HTML中聲明只有IE6讀取此新建JS文件iepngfx.js中

只允許IE6讀取此JS文件方法：

<!--[ifIE6]>

<scriptsrc="images/iepngfx.js"language="javascript"type="text/javascript"></script>

<![endif]-->

3、在html中使用圖片標(biāo)簽IMG運(yùn)用PNG圖片，在IE6試試看PNG圖片背景是否透明了。3、在CSS中png作為網(wǎng)頁(yè)背景時(shí)在IE6中背景透明方法

-

TOP

同樣方法

1、新建JS文件同上，命名為iepngfx.js,進(jìn)以上JS代碼拷貝到JS文件里

2、在HTML中聲明只有IE6讀取此新建JS文件iepngfx.js中

只允許IE6讀取此JS文件方法：

<!--[ifIE6]>

<scriptsrc="images/iepngfx.js"language="javascript"type="text/javascript"></script>

<![endif]-->

3、在CSS中運(yùn)用PNG圖片作為背景的地方加入以下CSS代碼：

#id{background:url(圖片路徑);_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src="圖片路徑");_background:none;}

這樣即可解決PNG圖片在HTML中img作為圖片圖標(biāo)背景不能透明或PNG圖片作為網(wǎng)頁(yè)背景background運(yùn)用的一樣實(shí)現(xiàn)PNG圖片背景透明CSS針對(duì)谷歌瀏覽器(Chrome)safari的webkit核心瀏覽器CSShack我們知道和會(huì)運(yùn)用CSSIE火狐瀏覽器之間的區(qū)別DIV+CSSHACK，這里為大家再介紹下區(qū)別谷歌瀏覽器(Chrome)蘋(píng)果瀏覽器(safari)與IE之間的hack;只有webkit核心瀏覽器的谷歌瀏覽器、safari瀏覽器識(shí)別的CSShackChrome和safari的CSShack代碼，只有谷歌瀏覽器蘋(píng)果瀏覽器讀取CSS代碼：

@mediascreenand(-webkit-min-device-pixel-ratio:0){

/*Webkit內(nèi)核兼容CSS*/

}范例：

@mediascreenand(-webkit-min-device-pixel-ratio:0){

.yangshi1{color:#f00}

.yangshi2{border:1pxsolid#f00;}

.yangshi3{background:#f00;}

}

HTML代碼：

<divclass="yangshi1">css樣式1</div><br/>

<br/>

<divclass="yangshi2">divcss5樣式2</div><br/>

<br/>

<divclass="yangshi3">div+css樣式3</div>

總DIVCSS代碼：

<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>谷歌瀏覽器和safari

webkit獨(dú)有區(qū)別其它瀏覽器csshack演示</title>

<styletype="text/css">

@mediascreenand(-webkit-min-device-pixel-ratio:0){

.yangshi1{color:#f00}

.yangshi2{border:1pxsolid#f00;}

.yangshi3{background:#f00;}

}

/**/

</style>

</head><body>

<divclass="yangshi1"><ahref="">css</a>樣式1</div><br/>

<br/>

<divclass="yangshi2"><ahref="">divcss5</a>樣式2</div><br/>

<br/>

<divclass="yangshi3"><ahref="">div+css</a>樣式3</div>

</body>

</html>

可自己動(dòng)動(dòng)手復(fù)制以上完整演示代碼，自己實(shí)例實(shí)例增加記憶和使用技巧知識(shí)演示效果圖：

csshack演示圖

說(shuō)明：左邊下方為IE瀏覽器顯示效果，右邊上方為谷歌瀏覽器顯示效果，很明顯Chrome支持獨(dú)有生效的此CSShack代碼。

CSS網(wǎng)頁(yè)錯(cuò)位之DIVCSS寬度計(jì)算DIVCSS寬度計(jì)算之CSS網(wǎng)頁(yè)布局錯(cuò)位為什么計(jì)算寬度

計(jì)算網(wǎng)頁(yè)像素寬度是為了CSS網(wǎng)頁(yè)布局整齊與兼容。常見(jiàn)的我們布局左右結(jié)構(gòu)網(wǎng)頁(yè)或使用padding、margin布局的時(shí)候?qū)⒂?jì)算整頁(yè)寬度，如果不計(jì)算無(wú)論是寬度過(guò)大過(guò)小就會(huì)出現(xiàn)錯(cuò)位問(wèn)題。怎么計(jì)算CSS寬度

例一：我們計(jì)算一個(gè)左右結(jié)構(gòu)的布局樣式。

假如總寬度為400px，那么左右加起來(lái)就應(yīng)當(dāng)小于400px，那我們可能左邊為300px，右邊為100px

正確代碼：<!DOCTYPEhtml>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>左右結(jié)構(gòu)寬度計(jì)算</title>

<styletype="text/css">

.yangshi{width:400px;}

.zuo{float:left;width:300px;background:#CCC;}

.you{float:right;width:100px;background:#999}

</style>

</head>

<body>

<divclass="yangshi">

<divclass="zuo">左邊300px</div>

<divclass="you">右邊100px</div>

</div>

</body>

</html>

以上為正確的左右結(jié)構(gòu)總寬度剛好等于400px錯(cuò)誤：

假如我們?cè)诳倢挾炔蛔兦闆r下，左邊為300px，而右邊為120px那總寬度超過(guò)了20px，我們看看會(huì)出現(xiàn)什么問(wèn)題，DIV+CSS代碼如下：

<!DOCTYPEhtml>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>左右結(jié)構(gòu)寬度計(jì)算</title>

<styletype="text/css">

.yangshi{width:400px;}

.zuo{float:left;width:300px;background:#CCC;}

.you{float:right;width:120px;background:#999}

</style>

</head>

<body>

<divclass="yangshi">

<divclass="zuo">左邊300px</div>

<divclass="you">右邊100px</div>

</div>

</body>

</html>

我們根據(jù)上圖可看出因?yàn)榭倢挾却蠹s了20px，所以導(dǎo)致了左右結(jié)構(gòu)不能平齊，就出現(xiàn)了右邊往下掉。

這樣就出現(xiàn)了錯(cuò)位的兼容問(wèn)題，一般在實(shí)際中因?yàn)槲覀冇?jì)算的疏忽，一般相差小的時(shí)候是1px-2px，那樣就不會(huì)被我們發(fā)現(xiàn)，所以排除錯(cuò)位兼容可以從寬度計(jì)算入手。例二：左右結(jié)構(gòu)中有1px邊框?qū)嵗?/p>

一般左右結(jié)構(gòu)中有1px邊框，然后再加上有些邊框這時(shí)我們?cè)O(shè)置左右結(jié)構(gòu)時(shí)候就需要將此邊框?qū)挾扰c左右結(jié)構(gòu)寬度計(jì)算在一起。

正確例子：

CSS與html代碼如下：

<!DOCTYPEhtml>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>左右結(jié)構(gòu)寬度計(jì)算</title>

<styletype="text/css">

.yangshi{width:400px;}

.zuo{float:left;width:298px;border:1pxsolid#F00;background:#CCC;}

.you{float:right;width:98px;background:#999;border:1pxsolid#F00;}

</style>

</head>

<body>

<divclass="yangshi">

<divclass="zuo">左邊300px</div>

<divclass="you">右邊100px</div>

</div>

</body>

</html>

結(jié)果圖：

因左右結(jié)構(gòu)都有1px的寬度這個(gè)時(shí)候各需要減去左右2像素的邊框?qū)挾?，所以左邊最后?98px，右邊為98px的寬度如果不減去邊框?qū)?huì)造成一下效果：

DIV+CSS設(shè)置百分比寬度計(jì)算

有時(shí)候我們也需要使用百分比來(lái)計(jì)算寬度，通常情況也是總的百分比寬度，不能超過(guò)100%CSS寬度計(jì)算時(shí)候注意總結(jié)：

無(wú)論是左右結(jié)構(gòu)、多列的布局還是單獨(dú)一個(gè)DIV寬度的布局設(shè)置都需要注意寬度的把握與計(jì)算，特別是使用了padding、margin、邊框等CSS屬性，這個(gè)時(shí)候我們都需要將它們?cè)O(shè)置的占用寬度計(jì)算入內(nèi)，牢牢把握同排各寬度之和小于或等于總寬度，如果大于總寬度將會(huì)出現(xiàn)錯(cuò)位的兼容問(wèn)題。所以一般錯(cuò)位時(shí)我們就可以從計(jì)算寬度入手，當(dāng)然錯(cuò)位還有很多原因這里也是解決錯(cuò)位兼容問(wèn)題的方法之一。CSS失效網(wǎng)頁(yè)亂碼原因兼容問(wèn)題-手寫(xiě)CSS代碼注意什么?亂碼VS編碼

前面我們介紹過(guò)導(dǎo)致網(wǎng)頁(yè)亂碼、CSS失效等原因一部分是由于自己編寫(xiě)的時(shí)候沒(méi)有注意編碼問(wèn)題，不編碼轉(zhuǎn)化問(wèn)題，常常因?yàn)樽约簩?xiě)的時(shí)候使用一種編碼，發(fā)現(xiàn)別人比較好的DIV+CSS片段比較好直接就復(fù)制過(guò)來(lái)用，結(jié)果別人編碼與自己編碼不符合從而造成網(wǎng)頁(yè)在IE中呈現(xiàn)亂碼，或CSS失效(CSS聲明)。解決辦法使用軟件中編碼轉(zhuǎn)化功能進(jìn)行網(wǎng)頁(yè)代碼轉(zhuǎn)化。如使用Dreamweaver中功能轉(zhuǎn)化編碼。-了解語(yǔ)言編碼charset網(wǎng)頁(yè)編碼知識(shí)大小寫(xiě)VS失效

1、CSS命名選擇符大小寫(xiě)為注意

常常我們?cè)趯?xiě)html時(shí)候使用標(biāo)簽的時(shí)候使用全角或中文輸入法的時(shí)候我們能看出毛病來(lái)，但是在手寫(xiě)CSS代碼的時(shí)候因?yàn)樽约喊袰SS命名的選擇符這個(gè)“.”（點(diǎn)）大寫(xiě)結(jié)果會(huì)造成此CSS選擇器失效，所以注意CSS選擇符大小寫(xiě)。（一定使用半角英文輸入法小寫(xiě)）2、CSS屬性中分號(hào)大小寫(xiě)

在寫(xiě)CSS選擇器內(nèi)的CSS屬性的時(shí)候，我們常常因?yàn)槲醋⒁饷總€(gè)CSS屬性和對(duì)應(yīng)值結(jié)束的時(shí)候需要用“;”（分號(hào)）結(jié)束分割，或未寫(xiě)或大寫(xiě)都會(huì)造成此后的這個(gè)選擇器內(nèi)屬性失效。當(dāng)然一個(gè)CSS屬性選擇器最后一個(gè)可以不加分號(hào)結(jié)束，但是我們?yōu)榱损B(yǎng)成良好的習(xí)慣一定加上。（每個(gè)CSS選擇器花括號(hào)的CSS屬性結(jié)束一定要以半角小寫(xiě)分號(hào)“;”結(jié)束。）DIVCSS5總結(jié)：

無(wú)論是使用工具制作DIVCSS網(wǎng)頁(yè)還是手寫(xiě)，平時(shí)多注意這些小問(wèn)題，一點(diǎn)一滴積累和養(yǎng)成好的習(xí)慣將會(huì)讓你在制作網(wǎng)頁(yè)時(shí)候不易出錯(cuò)，記住細(xì)節(jié)決定成?。?/p>

IE的if條件csshack針對(duì)不同的IE瀏覽器版本，使用if條件來(lái)設(shè)置對(duì)應(yīng)css樣式，從而解決csshack

<!--[ifIE]>OnlyIE<![endif]-->

所有的IE可識(shí)別

<!--[ifIE5.0]>OnlyIE5.0<![endif]-->

只有IE5.0可以識(shí)別

<!--[ifgtIE5.0]>OnlyIE5.0+<![endif]-->

IE5.0包換IE5.5都可以識(shí)別

<!--[ifltIE6]>OnlyIE6-<![endif]-->

僅IE6可識(shí)別以內(nèi)的css樣式

<!--[ifgteIE6]>OnlyIE6/+<![endif]-->

IE6以及IE6以下的IE5.x都可識(shí)別

<!--[iflteIE7]>OnlyIE7/-<![endif]-->

僅IE7可識(shí)別以內(nèi)的css樣式

特別說(shuō)明ie8不能使用if條件來(lái)設(shè)置divcss樣式，這里的“<!-”是css注解、css注釋、css解釋中用到相同，可以進(jìn)入了解css注釋。這里使用css注釋方式來(lái)解決if條件隱藏條件，從而在其它不符合if條件瀏覽器下不顯示條件及解釋if條件里樣式，你可以了解下css隱藏其它方法。通過(guò)以上的if條件來(lái)對(duì)不同版本瀏覽器調(diào)用不同css樣式來(lái)解決csshack方法。

實(shí)例如下：

接下來(lái)我們只實(shí)驗(yàn)一個(gè)只有微軟IE可識(shí)別，火狐不識(shí)別例子代碼如下

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>IE的if條件csshack實(shí)例</title>

<styletype="text/css">

<!--[ifIE]>

<!--

.ys1{color:#FF0000}

-->

<![endif]-->

</style>

</head><body>

<p><!--[if IE]> Only IE <![endif]--></p>

<p>我是<spanclass="ys1"></span>測(cè)試樣式

</p>

</body>

</html>

截圖如下

左邊為微軟IE瀏覽器，右邊為火狐瀏覽器，通過(guò)if條件對(duì)樣式設(shè)置只在ie中起作用后效果圖。

特別說(shuō)明的if條件在ie8中不能生效。

區(qū)別IE8瀏覽器的CSShack上次我們介紹了ie6、ie7、火狐（firefox）瀏覽器的csshack區(qū)別方法及運(yùn)用，接下來(lái)我們介紹微軟最新IE成員ie8與前面瀏覽器的csshack寫(xiě)法區(qū)別。在使用csshack中我們運(yùn)用了CSS讀取原理。同時(shí)安裝ie6、ie7、ie8瀏覽器方法：IETester瀏覽器測(cè)試工具介紹。CSShack區(qū)分如下——注意順序與瀏覽器CSSHACK位置：

CSShack:區(qū)分IE6，IE7，IE8，firefox

區(qū)別不同瀏覽器，CSShack寫(xiě)法：

區(qū)別FF與IE6：

background:orange;*background:blue;解釋：FF只能識(shí)別background:orange;IE6識(shí)別*background:blue;

區(qū)別IE7與IE6：

background:green!important;background:blue;或者*background:green;_background:blue;

區(qū)別IE6與IE8：

background:orange;/*/background:blue;/**/

區(qū)別IE7與IE8：

background:orange;/*/background:blue;/**/

區(qū)別FF與IE7：

background:orange;*background:green!important;

區(qū)別FF，IE7，IE8，IE6：

background:orange;*background:greenimportant;background:#111\9;_background:blue;

或者使用

區(qū)別FF，IE7，IE8，IE6：

background:orange;*background:green!important;background:#111\9;*background:blue;CSSHack實(shí)例例子：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>DIV+CSS各瀏覽器csshack測(cè)試,測(cè)試</title>

<styletype="text/css">

<!--

.STYLE1{font-size:18px;color:#FF0000;*color:#00FF00!important;color:#0000FF\9;*color:#FFFF00;}

.STYLE2,.STYLE3,.STYLE4,.STYLE5{font-size:14px;}

.STYLE2{color:#FFFF00}

.STYLE3{color:#FF0000}

.STYLE4{color:#00FF00}

.STYLE5{color:#0000FF}

-->

</style>

</head>

<body>

<spanclass="STYLE1">我是測(cè)試顏色，不在不同瀏覽器下顯示顏色不同哦！-<ahref="/">DIV+CSS</a></span><br/>

<spanclass="STYLE2">我是顏色在IE6顯示</span><br/>

<spanclass="STYLE4">我是顏色在ie7顯示</span><br/>

<spanclass="STYLE5">我是顏色在ie8顯示</span><br/>

<spanclass="STYLE3">我是顏色在火狐（firefox）顯示</span>

</body>

</html>

在線演示-點(diǎn)擊這里

以上代碼你拷貝到一個(gè)新建的html文件在不同版本瀏覽器測(cè)試就會(huì)有不同效果。運(yùn)用此例子即可解決我們?cè)谌粘IV+CSS開(kāi)發(fā)時(shí)候的csshack問(wèn)題。同時(shí)我們?nèi)绻幌肽敲吹穆闊﹣?lái)做IE8的csshack，我們只需要在html的<head></head>之間加入<metahttp-equiv="X-UA-Compatible"content="IE=EmulateIE7"/>，最好加到CSS文件下發(fā)即可，在IE8下和IE7下顯示內(nèi)容相同，這樣我們只需區(qū)分IE6、IE7、火狐（firefox）的csshack即可。很多大型站點(diǎn)都采用在head加入此代碼來(lái)減少cssbug。

CSShack之區(qū)別不同瀏覽器的寫(xiě)法我們?cè)陂_(kāi)發(fā)DIV+CSS頁(yè)面時(shí)候常常會(huì)遇到開(kāi)發(fā)出的網(wǎng)頁(yè)的一些地方在各大瀏覽器比如微軟IE6、微軟IE7、微軟IE8、火狐瀏覽器、谷歌瀏覽器有一些不同，如寬度、高度等地方有相差誤。IE6比較老的版本瀏覽器，用戶比較多，

IE7較新瀏覽器，更接近標(biāo)準(zhǔn)瀏覽器，

IE8算是微軟標(biāo)準(zhǔn)瀏覽器，但差別于瀏覽器，

火狐（Mozilla,Firefox）和谷歌瀏覽器（chrome）是比較標(biāo)準(zhǔn)的IE瀏覽器，一般我們以這個(gè)瀏覽器為開(kāi)發(fā)參考平臺(tái)，同時(shí)IE8與這兩個(gè)瀏覽器解釋CSS比較接近，一般只要通過(guò)火狐、谷歌瀏覽器測(cè)試兼容，一般就能確定IE8.因此一般我們區(qū)別這些瀏覽器CSShack的方法就變得簡(jiǎn)單，我們只需考慮IE6\IE7\火狐（Firefox）這3個(gè)瀏覽器即可兼容全部瀏覽器。

具體區(qū)別如下：

區(qū)別IE6與FF：

background:oran