1. 程式人生 > >CSS IE7 IE6 Firefox多瀏覽器相容(五)子選擇器招數(Hack)和屬性選擇器

CSS IE7 IE6 Firefox多瀏覽器相容(五)子選擇器招數(Hack)和屬性選擇器

子選擇器招數(Hack) 

最安全的過濾器依賴於未實現的CSS,而不是瀏覽器Bug。因為這些過濾器使用有效的CSS選擇器來應用有效的宣告,所以嚴格地說,他們根本不是過濾器。他們僅僅是某些瀏覽器所不能理解的有效CSS規則。這些過濾器中的第一個稱為子選擇器招數。Windows上的IE6和更低版本的IE不支援子選擇器,所以可以使用它對這些瀏覽器隱藏規則。為了讓這種過濾器起到作用,必須確保在子選擇器前後沒有空格。

在這個示例中,使用子選擇器招數(Hack)對IE 5-6/Win 隱藏透明的北京PNG圖象。

html>body {
   background-image:(bg.png)
}

IE7 預期會支援子選擇器,還會支援PNG透明度。通過以這種方式使用子選擇器,就允許IE的新版本看到透明背景,而不需要修改程式碼,因而提供了向前相容性。等於ie5,i56視而不見,而IE7可以用得恰當好處,這裡並不是多瀏覽器相容,而是向前相容。

屬性選擇器招數(Hack)

另一種過濾器規則的有趣方法是使用屬性選擇器。許多當前的瀏覽器(比如 Safari–Mac蘋果上的  和Firefox IE7)支援使用屬性選擇器,但是IE6並不支援它。因此,可以使用屬性選擇器在比較高階的瀏覽器中對類和ID應用樣式。在這個示例中,使用屬性選擇器在符合標準的瀏覽器中將背景PNG應用於內容div:

div[id=”content”] {
     background=url(bg.png);
}

你可以用這些讓不同瀏覽器顯示出不同的效果,當然也可以使用它在多瀏覽器裡顯示同樣的效果。