在編寫網站的過程中,我們常常會使用 CSS 樣式來美化頁面,但不同的瀏覽器對 CSS 樣式的支持情況各不相同,導致我們編寫的 CSS 樣式在不同的瀏覽器上表現不一致。為了解決這個問題,我們需要了解 CSS 樣式在各個瀏覽器中的兼容性表現。
/* example */ p{ color: red; background: blue; border: 1px solid green; }
CSS 樣式兼容表是一份記錄了各種 CSS 樣式在各個瀏覽器中表現的情況的資料,包括了各個瀏覽器對 CSS 標準規范的支持情況、對 CSS3 標準規范的支持情況、對 CSS Hack 的支持情況等。雖然這些兼容性問題在現代瀏覽器中已經得到了很好的修復,但在一些老舊的瀏覽器中仍然存在一些問題。
下面是一份簡化版的 CSS 樣式兼容表:
/* CSS 兼容表 */ p{ color: red; /* 所有瀏覽器支持 */ background: blue; /* 所有瀏覽器支持 */ border: 1px solid green; /* 所有瀏覽器支持 */ } /* CSS3 兼容表 */ p{ border-radius: 5px; /* Chrome、Firefox、Safari、Opera、IE9+ 支持,IE8- 不支持 */ box-shadow: 5px 5px 5px #888888; /* Chrome、Firefox、Safari、Opera、IE9+ 支持,IE8- 不支持 */ text-shadow: 2px 2px #888888; /* Chrome、Firefox、Safari、Opera、IE9+ 支持,IE8- 不支持 */ } /* CSS Hack 兼容表 */ p{ color: red; /* 所有瀏覽器支持 */ background-color: blue\9; /* IE6-IE9 支持,其他瀏覽器不支持 */ *background-color: blue; /* IE6-IE7 支持,其他瀏覽器不支持 */ _background-color: blue; /* IE6 支持,其他瀏覽器不支持 */ }
通過參考 CSS 樣式兼容表,我們可以更好地了解各種 CSS 樣式在不同瀏覽器上的表現情況,編寫出更加兼容各種瀏覽器的 CSS 樣式。同時,在編寫 CSS 樣式的時候,我們也需要避免過度依賴 Hack,因為過多使用 Hack 式的樣式會導致 CSS 代碼的可讀性、可維護性降低,也難以適應不同的瀏覽器版本。
上一篇css樣式內填充