IE瀏覽器單獨(dú)寫CSS樣式的方法有哪些

本篇內(nèi)容主要講解“IE瀏覽器單獨(dú)寫CSS樣式的方法有哪些”,感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“IE瀏覽器單獨(dú)寫CSS樣式的方法有哪些”吧!

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括合作網(wǎng)站建設(shè)、合作網(wǎng)站制作、合作網(wǎng)頁(yè)制作以及合作網(wǎng)絡(luò)營(yíng)銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,合作網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到合作省份的部分城市,未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!

IE hacks

舉個(gè)例子,一個(gè)元素在其他瀏覽中的左邊距是 30px ,而在 IE6 中則設(shè)置為 20px ,可以如下編寫:

代碼如下:

.demo {margin-left: 30px; _margin-left: 20px; }


對(duì)我個(gè)人而言,喜歡條件注釋 CSS 是勝于 IE hacks ,光是 IE hacks 里面帶有“hacks”這個(gè)單詞已經(jīng)讓人很不舒服,總覺得這是偏方,而且是很偏的解決方案。但是,IE hacks 也有它的優(yōu)點(diǎn)——

1.CSS hacks 內(nèi)嵌在普通的 CSS 里面,不會(huì)產(chǎn)生更多 HTTP 請(qǐng)求。
2.CSS hacks 內(nèi)嵌在普通的 CSS 里面,編寫時(shí)比較方便。


當(dāng)然,它的缺點(diǎn)也很明顯——

1.它是不標(biāo)準(zhǔn)的產(chǎn)物。
2.內(nèi)嵌在其他 CSS 中,不便維護(hù)。尤其是當(dāng) hacks 的數(shù)量比較多的時(shí)候維護(hù)簡(jiǎn)直是個(gè)惡夢(mèng)。
3.內(nèi)嵌在其他 CSS 中,即使在非 IE 瀏覽器中也會(huì)被加載,浪費(fèi)資源。

條件注釋 CSS

同樣是上面的例子,如果使用條件注釋 CSS ,可以如下編寫:

HTML:

代碼如下:

<!--[if IE 6 ]>
   <link rel="stylesheet" type="text/css" media="all" href="./ie6.css" />
<![endif]-->


ie6.css

代碼如下:

.demo {margin-left: 20px; }


這里說明一下:條件注釋是一種 IE 專有的、對(duì)常規(guī)(X)HTML 注釋的 Miscrosoft 擴(kuò)展。從 W3C 標(biāo)準(zhǔn)來說,它也是不標(biāo)準(zhǔn)的產(chǎn)物,但它是微軟官方推出的針對(duì) IE 進(jìn)行開發(fā)的方式,并且條件注釋對(duì)于其他所有瀏覽器作為常規(guī)注釋出現(xiàn),因此對(duì)其他瀏覽器無害。

條件注釋 CSS 的好處是在獨(dú)立的 CSS 文件中編寫,能準(zhǔn)確控制在特定的 IE 中加載,不會(huì)造成資源浪費(fèi),并且便于維護(hù)。缺點(diǎn)就是會(huì)產(chǎn)生多余的 HTTP 請(qǐng)求,尤其是當(dāng)你需要兼容的 IE 版本很多的時(shí)候,你就需要產(chǎn)生多個(gè) HTTP 請(qǐng)求,這對(duì)于本來通道數(shù)目就少的低版本 IE 來說無疑會(huì)影響頁(yè)面加載速度。

顯然,以上兩種方法都不是很好的方法,因此,接下來介紹一種相對(duì)來說更好的解決方案。

條件注釋 html 標(biāo)簽

這種方案也是利用條件注釋,但并不是對(duì) CSS 使用條件注釋,而是對(duì) html 標(biāo)簽使用條件注釋,引入不同的 class ,從而區(qū)分不同的 IE 以及其他瀏覽器。例如:

代碼如下:

<!DOCTYPE html>
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]-->


然后把針對(duì)特定 IE 的 CSS 加上相應(yīng)的 class 并寫在普通 CSS 文件里即可。例如上面的例子則可以在 CSS 文件里編寫:

代碼如下:

.ie6 .demo {margin-left: 20px; }


這種方法吸收了條件注釋表達(dá)式的好處同時(shí)又不會(huì)產(chǎn)生多余的 HTTP 請(qǐng)求,只是由于這些針對(duì)特定 IE 的 CSS 與普通的 CSS 放在一起,即不是相應(yīng)的 IE 也會(huì)被加載,因此如果 CSS 數(shù)目比較多的話就會(huì)像使用 hacks 那樣,造成浪費(fèi),開發(fā)者需要根據(jù)具體情況選擇方法。

到此,相信大家對(duì)“IE瀏覽器單獨(dú)寫CSS樣式的方法有哪些”有了更深的了解,不妨來實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!

當(dāng)前文章:IE瀏覽器單獨(dú)寫CSS樣式的方法有哪些
網(wǎng)頁(yè)網(wǎng)址:http://muchs.cn/article30/jcgipo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站收錄、網(wǎng)站導(dǎo)航定制網(wǎng)站、網(wǎng)站維護(hù)、App開發(fā)品牌網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)