CSS雙實現指的是一種讓樣式在不同瀏覽器中都能生效的技術。因為不同瀏覽器對CSS的支持程度可能會有所不同,而且有些CSS屬性在不同瀏覽器中的默認值也不相同,這就導致了網頁在不同瀏覽器中顯示效果不一致的問題。
/* 例如下面的代碼,可以控制不同瀏覽器下border的默認值相同 */ border: 1px solid #333333; border: 1px solid rgb(51, 51, 51); border: 1px solid rgba(0, 0, 0, 0.2);
在實際開發(fā)中,我們可以通過以下兩種方式實現CSS雙實現技術:
- 根據不同瀏覽器的不同特性,使用特定的前綴來定義一些不同瀏覽器所支持的屬性。
- 使用CSS Hack的方式,根據不同瀏覽器的不同特性來為不同瀏覽器定義針對CSS屬性的不同樣式規(guī)則。
在CSS3中,有些新的CSS屬性還無法得到所有瀏覽器的支持。在這種情況下,我們可以先用瀏覽器支持的較老版本的CSS寫法,再通過使用CSS Hack的方式來實現在某些特定瀏覽器中的額外效果。
/* 在Firefox、Chrome、Safari和IE10+中適用,但不支持IE9及以下瀏覽器 */ .transparent { background: rgba(255, 255, 255, 0.8); /* 透明度80%的白色背景 */ } /* 在IE9及以下瀏覽器中適用 */ .transparent { background: transparent; /* 取消IE瀏覽器默認背景 */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccffffff',endColorstr='#ccffffff'); zoom: 1; /* 防止IE瀏覽器縮放產生的背景模糊 */ }
需要注意的是,CSS Hack雖然可以在某些情況下解決問題,但它并不是一種正規(guī)的CSS技術。所以我們在使用CSS Hack時,需要視情況而定,不可濫用。
上一篇css里如何刪除下劃線
下一篇css除去某一元素選擇器