[分享]css兼容性怎么用

在前端开发中，CSS样式是页面布局和展示的重要组成部分。但是由于浏览器之间的差异性，同样的CSS样式在不同的浏览器中展示效果不同，因此需要使用CSS兼容性技巧来保证页面在各种浏览器中都能正确展示。/ ...

在前端开发中，CSS样式是页面布局和展示的重要组成部分。但是由于浏览器之间的差异性，同样的CSS样式在不同的浏览器中展示效果不同，因此需要使用CSS兼容性技巧来保证页面在各种浏览器中都能正确展示。

/* 例如需要为IE浏览器设置独立的样式 */
/* IE7及以下版本 */
#header {
  background-color:#f1eeeb;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffF1EEEB', endColorstr='#ffD5D5D5', GradientType=0);
}
/* IE8及以上版本 */
#header {
  background: -ms-linear-gradient(top, #f1eeeb 0%, #d5d5d5 100%) !important;  /* IE10+ */
  background: -moz-linear-gradient(top, #f1eeeb 0%, #d5d5d5 100%) !important;  /* FF3.6+ */
  background: -o-linear-gradient(top, #f1eeeb 0%, #d5d5d5 100%) !important;  /* Opera 11.10+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1eeeb), color-stop(100%,#d5d5d5)) !important;  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #f1eeeb 0%,#d5d5d5 100%) !important;  /* Chrome10+,Safari5.1+ */
} 

上述代码就是一个兼容性的例子，为了保证在各个版本的IE浏览器中都能正常显示，需要分别设置不同的CSS样式。其中filter属性是IE7及以下版本的特有属性，而后面的各个CSS样式则是其他现代浏览器使用的渐变样式。通过这样的方式，就可以保证在各种浏览器中都能正确显示页面的样式。