IE瀏覽器單獨寫CSS樣式的幾種方法

2022-09-24 22:45:11 字數 1551 閱讀 8872

因為萬惡的 ie 存在各種的不標準,因此,在進行頁面開發時不免要為 ie 單獨寫一些 css 。熟悉的方法有 ie hacks 和條件注釋 css(conditional stylesheets),下面,不妨討論一下這兩種方法的優缺點。

ie hacks

舉個例子,乙個元素在其他瀏覽中的左邊距是 30px ,而在 ie6 中則設定為 20px ,可以如下編寫:

複製**

**如下:

.demo

對我個人而言,喜歡條件注釋 css 是勝於 ie hacks ,光是 ie hacks 裡面帶有「hacks」這個單詞已經讓人很不舒服,總覺得這是偏方,而且是很偏的解決方案。但是,ie hacks 也有它的優點——

1.css hacks 內嵌在普通的 css 裡面,不會產生更多 http 請求。

2.css hacks 內嵌在普通的 css 裡面,編寫時比較方便。

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

1.它是不標準的產物。

2.內嵌在其他 css 中,不便維護。尤其是當 hacks 的數量比較多的時候維護簡直是個惡夢。

3.內嵌在其他 css 中,即使在非 ie 瀏覽器中也會被載入,浪費資源。

條件注釋 css

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

html:

複製**

**如下:

ie6.css

複製**

**如下:

.demo

這裡說明一下:條件注釋是一種 ie 專有的、對常規(x)html 注釋的 miscrosoft 擴充套件。從 w3c 標準來說,它也是不標準的產物,但它是微軟官方推出的針對 ie 進行開發的方式,並且條件注釋對於其他所有瀏覽器作為常規注發布現,因此對其他瀏覽器無害。

條件注釋 css 的好處是在獨立的 css 檔案中編寫,能準確控制在特定的 ie 中載入,不會造成資源浪費,並且便於維護。缺點就是會產生多餘的 http 請求,尤其是當你需要相容的 ie 版本很多的時候,你就需要產生多個 http 請求,這對於本來通道數目就少的低版本 ie 來說無疑會影響頁面載入速度。

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

條件注釋 html 標籤

這種方案也是利用條件注釋,但並不是對 css 使用條件注釋,而是對 html 標籤使用條件注釋,引入不同的 class ,從而區分不同的 ie 以及其他瀏覽器。例如:

複製**

**如下:

然後把針對特定 ie 的 css 加上相應的 class 並寫在普通 css 檔案裡即可。例如上面的例子則可以在 css 檔案裡編寫:

複製**

**如下:

.ie6 .demo

這種方法吸收了條件注釋表示式的好處同時又不會產生多餘的 http 請求,只是由於這些針對特定 ie 的 css 與普通的 css 放在程式設計客棧一起,即不是相應的 ie 也會被載入,因此如果 css 數目比較多的話就會像使用 hacks 那樣,造成浪費,開發者需要根據具體情況選擇方法。

本文標題: ie瀏覽器單獨寫css樣式的幾種方法

本文位址: /web/css/82919.html

針對IE瀏覽器的CSS樣式(相容性)

1.ie hacks 是ie6 專有的hack 9 對ie6 ie10都有效 0 對ie8 ie10都有效 9 0 對ie9 ie10都有效 優點 css hacks 內嵌在普通的 css 裡面,不會產生更多 http 請求。css hacks 內嵌在普通的 css 裡面,編寫時比較方便。缺點 它是...

css樣式判斷瀏覽器

b 區別ie6 ie7 ie8 firefox b tip 為ie系列瀏覽器可讀 9 而ie6和ie7可讀 公尺字型大小 另外ie6可辨識 底線 因此可以依照順序寫下來,就會讓瀏覽器正確的讀取到自己看得懂得css語法,所以就可以有效區分ie各版本和非ie瀏覽器 像是firefox opera goo...

IE瀏覽器和CSS盒模型

下面是一幅關於應用了css的元素是如何顯示它的尺寸的圖示。在本篇文章中,所有的瀏覽器在計算盒模型總寬度時處理margin屬性的方式都是一致的,所以我們將更多的精力放在padding和border屬性上。首先看一下 the w3c box model 這裡所寫出的標準,如果沒問題的話,是應該被所有標準...