[分享]css3所有兼容性问题

CSS3是Web开发中不可或缺的技术之一，它带来了各种强大的样式和交互效果，但由于不同浏览器实现CSS3的方式不同，所以存在许多兼容性问题。首先是CSS3的选择器兼容性问题。在IE8及以下版本中，不支...

CSS3是Web开发中不可或缺的技术之一，它带来了各种强大的样式和交互效果，但由于不同浏览器实现CSS3的方式不同，所以存在许多兼容性问题。

首先是CSS3的选择器兼容性问题。在IE8及以下版本中，不支持一些新引入的选择器，比如：nth-child，nth-of-type等。这些选择器可以使用Javascript改写或者使用Polyfill来解决。另外，IE8及以下版本不支持属性选择器中的“^=”、“$=”、“*=”等语法。

其次是CSS3的盒模型兼容性问题。CSS3引入了box-sizing属性，可以指定盒模型的计算方式。但部分浏览器对此的支持不完整，比如IE8中不支持此属性的值为“border-box”。

/*box-sizing属性的用法*/ 
box-sizing: content-box;
box-sizing: border-box;
box-sizing: padding-box; 

另外，CSS3中引入了伸缩盒模型（Flexbox）和网格布局（Grid Layout），这些新属性在不同浏览器中的兼容性也存在一些问题。比如在IE10中，Flexbox需使用-ms-前缀，而在IE11中则不需要了。

/*Flexbox属性的用法*/ 
display: -webkit-box; /* Safari 3.1 - 6.0 */
display: -moz-box; /* Firefox 2 - 27 */
display: -ms-flexbox; /* IE 10 */
display: -webkit-flex; /* Safari 6.1+ */
display: flex; /* Chrome 29+, Opera 12.1, Firefox 22+ */ 

最后，CSS3的动画和过渡兼容性问题。CSS3中的transition和animation可以实现复杂的动画效果，但在不同浏览器实现的效果上可能会存在差异，比如IE10中的动画可能不支持一些特殊的贝塞尔曲线值。

/*transition属性的用法*/ 
/* Chrome, Safari, Opera */
-webkit-transition: width 2s; 

/* Standard syntax */
transition: width 2s; 

综上所述，CSS3虽然强大，但由于兼容性问题给我们带来了许多困扰，需要在开发过程中注意兼容性，并选择适合的解决方案。