CSS Hack技術(shù)解決多瀏覽器兼容問(wèn)題

AngryStone 2013-07-29

展開(kāi)全文

CSS Hack技術(shù)解決多瀏覽器兼容問(wèn)題

CSS Hack就是指我們?yōu)榱思嫒莞鳛g覽器,，而使用的特別的CSS定義技巧,，我們?cè)谟肈IV+CSS制作網(wǎng)頁(yè)時(shí),，由于不同的瀏覽器,，對(duì)CSS的支持及解析結(jié)果不一樣，得不到我們所需要的頁(yè)面效果,。

AD：2013云計(jì)算架構(gòu)師峰會(huì)超低價(jià)搶票中

本文向大家描述一下如何使用CSS Hack技巧解決DIV+CSS布局多瀏覽器兼容問(wèn)題,，針對(duì)不同的瀏覽器寫(xiě)不同的CSS代碼的過(guò)程，就叫CSS Hack,，相信本文介紹一定會(huì)讓你有所收獲,。

CSS Hack技巧匯總

CSS Hack簡(jiǎn)介

我們?cè)谟肈IV+CSS制作網(wǎng)頁(yè)時(shí)，由于不同的瀏覽器,，比如InternetExplorer6,InternetExplorer7,MozillaFirefox等對(duì)CSS的支持及解析結(jié)果不一樣,，導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果,。這時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS,，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果,。這個(gè)針對(duì)不同的瀏覽器寫(xiě)不同的CSS代碼的過(guò)程,，就叫CSS Hack。

為了向你展示這些CSS Hack是否正常運(yùn)作,，我新建六個(gè)P標(biāo)簽,，并給每一個(gè)P標(biāo)簽一個(gè)特有的id,。這將向你展示CSS Hack的運(yùn)作情況。

<pidpid="opera">我來(lái)自O(shè)pera7.2-9.5</p> 
<pidpid="safari">我是神奇的Safari</p> 
<pidpid="firefox">我來(lái)自Firefox</p> 
<pidpid="firefox12">我是FF前輩Firefox1-2</p> 
<pidpid="ie7">我是IE7</p> 
<pidpid="ie6">我是殘品IE6</p>

然后我讓這些P標(biāo)簽?zāi)J(rèn)都不顯示

<styletypestyletype="text/css"> 
bodyp{display:none;}  
</style>

使用IE CSS條件注釋區(qū)分IE瀏覽器

最簡(jiǎn)單的區(qū)分IE瀏覽器的方法自然是使用他們的條件注釋,。微軟創(chuàng)建了一個(gè)強(qiáng)大的語(yǔ)法來(lái)讓我們?nèi)?shí)現(xiàn)這個(gè)功能,。我不想再詳細(xì)地介紹IE條件注釋了,，我想你在搜索引擎能搜索到上萬(wàn)個(gè)搜索條目,，我這里只要這兩個(gè)：

<!--[ifIE7]> 
<styletypestyletype="text/css"> 
</style> 
<![endif]--> 
 
<!--[ifIE6]> 
<styletypestyletype="text/css"> 
</style> 
<![endif]-->

使用CSS解析器Hacks區(qū)分IE

雖說(shuō)IE條件注釋十分簡(jiǎn)單好用，但是如果你想把全部的CSS放到一個(gè)文件里的話,，那么你不得不使用別的方法,。注意這里的IE7Hack將只對(duì)IE7有效，因?yàn)镮E6根本不知道>選擇符,。同時(shí)你也得注意>選擇符對(duì)于其他瀏覽器同樣是無(wú)效的,。

/*IE7*/  
html>body#ie7  
{*display:block;}  
 
/*IE6*/  
body#ie6  
{_display:block;}

CSS Hack區(qū)分Firefox

第一個(gè)使用了body:empty來(lái)區(qū)分Firefox1和2。第二個(gè)hack使用了全部Firefox瀏覽器的專(zhuān)有擴(kuò)展-moz,。-moz只對(duì)Firefox有效,，使用這個(gè)Hack大可不必?fù)?dān)心其他瀏覽器的影響。

/*Firefox1-2*/  
body:empty#firefox12  
{display:block;}  
 
/*Firefox*/  
@-moz-documenturl-prefix()  
{#firefox{display:block;}}

CSS Hack區(qū)分Safari

Safari的CSS Hack與Firefox的hack看起來(lái)很像,，使用的是Safari瀏覽器的專(zhuān)有擴(kuò)展-webkit且只對(duì)Safari瀏覽器有效,。

/*Safari*/  
@mediascreenand(-webkit-min-device-pixel-ratio:0)  
{#safari{display:block;}}

CSS Hack區(qū)分Opera

/*Opera*/  
@mediaalland(-webkit-min-device-pixel-ratio:10000),  
notalland(-webkit-min-device-pixel-ratio:0)  
{head~body#opera{display:block;}}

然后，全部合在一起便是完整代碼：

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN"  
 
"http://www./TR/html4/strict.dtd"> 
<htmllanghtmllang="en"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"> 
<title>CSSBrowserHacks</title> 
<styletypestyletype="text/css"> 
bodyp  
{  
display:none;  
}  
/*Opera*/  
html:first-child#opera  
{  
display:block;  
}  
/*IE7*/  
html>body#ie7  
{  
*display:block;  
}  
/*IE6*/  
body#ie6  
{  
_display:block;  
}  
/*Firefox1-2*/  
body:empty#firefox12  
{  
display:block;  
}  
/*Firefox*/  
@-moz-documenturl-prefix()  
{  
#firefox{display:block;}  
}  
/*Safari*/  
@mediascreenand(-webkit-min-device-pixel-ratio:0)  
{  
#safari{display:block;}  
}  
/*Opera*/  
@mediaalland(-webkit-min-device-pixel-ratio:10000),  
notalland(-webkit-min-device-pixel-ratio:0)  
{  
head~body#opera{display:block;}  
}  
</style> 
</head> 
 
<body> 
<pidpid="opera">我來(lái)自O(shè)pera7.2-9.5</p> 
<pidpid="safari">我是神奇的Safari</p> 
<pidpid="firefox">我來(lái)自Firefox</p> 
<pidpid="firefox12">我是FF前輩Firefox1-2</p> 
<pidpid="ie7">我是囧IE7</p> 
<pidpid="ie6">我是殘品IE6</p></body> 
</html>

CSS Hack雖好且方便兼容各瀏覽器,，但是通不過(guò)W3C驗(yàn)證,，所以還得自己權(quán)衡是否有必要去使用。

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買(mǎi)等信息,，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào),。

久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

CSS Hack技術(shù)解決多瀏覽器兼容問(wèn)題

CSS Hack技術(shù)解決多瀏覽器兼容問(wèn)題