在進行PC端網站開發的過程中,我們經常會遇到兼容性問題,其中 CSS 的兼容處理也是非常重要的一環。因為不同的瀏覽器對 CSS 的解析都有所不同,所以在編寫 CSS 時需要考慮到所有可能出現的兼容性問題。
下面是一些 CSS 兼容處理的方法:
/* 1. 使用前綴 */ .box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /* 2. 使用 Hack */ .box { *background-color: red; /* IE 6、7 */ _background-color: yellow; /* IE 6 */ } /* 3. 使用條件注釋 */ <!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8.css" /><![endif]-->/* 4. 使用 Modernizr */ if (!Modernizr.borderimage) { $('.box').css('background', 'red'); } /* 5. 使用 Reset */ * { margin: 0; padding: 0; } /* 6. 不要使用 CSS3 動畫效果 */ .box { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; }
總之,在進行 CSS 兼容處理時,務必做到全面考慮,盡可能地使用一些通用的屬性和方法,減少使用不同瀏覽器的專有屬性,以避免出現兼容性問題。
上一篇css的幾種定位方式
下一篇dic加css的布局方式