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

發(fā)布時間：2021-09-29 15:29:52 來源：億速云閱讀：129 作者：iii 欄目：web開發(fā)

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

IE hacks

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

代碼如下:

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

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

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

當然，它的缺點也很明顯——

1.它是不標準的產(chǎn)物。
2.內(nèi)嵌在其他 CSS 中，不便維護。尤其是當 hacks 的數(shù)量比較多的時候維護簡直是個惡夢。
3.內(nèi)嵌在其他 CSS 中，即使在非 IE 瀏覽器中也會被加載，浪費資源。

條件注釋 CSS

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

HTML：

代碼如下:

ie6.css

代碼如下:

.demo {margin-left: 20px; }

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

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

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

條件注釋 html 標簽

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

代碼如下:

<!DOCTYPE html>




<html lang="zh-CN">

然后把針對特定 IE 的 CSS 加上相應的 class 并寫在普通 CSS 文件里即可。例如上面的例子則可以在 CSS 文件里編寫：

代碼如下:

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

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

到此，相信大家對“IE瀏覽器單獨寫CSS樣式的方法有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽