[分享]css兼容性问题大全

在CSS开发中，经常会遇到不同浏览器兼容性的问题，这些问题一般体现在CSS样式的呈现效果不同。在这里，我们会汇总一些常见的CSS兼容性问题，帮助开发者更好地解决这些问题。1、盒模型 IE盒模型与W3C...

在CSS开发中，经常会遇到不同浏览器兼容性的问题，这些问题一般体现在CSS样式的呈现效果不同。在这里，我们会汇总一些常见的CSS兼容性问题，帮助开发者更好地解决这些问题。

1、盒模型
IE盒模型与W3C盒模型的不同导致了元素宽度等值的计算方式不同，解决方式可以使用box-sizing属性改变盒模型。

2、浮动
IE浏览器的版本对浮动的支持不够完善，会存在一些错误，需要使用合适的清除浮动方法，如clearfix。

3、定位
某些浏览器可能不支持CSS定位属性，并且不支持的方法也不相同，需要使用浏览器前缀来适配。

4、文本
某些浏览器可能不支持CSS文本属性，如text-shadow，需要使用浏览器前缀来适配。

5、字体
IE9以下版本不支持@font-face规则，需要使用其他方法解决字体兼容性问题。

6、表单元素样式
某些浏览器对表单元素的默认样式不相同，需要对不同浏览器使用不同的样式清除默认样式，如webkit-appearance:none。

7、媒体查询
某些浏览器对媒体查询的支持不完全，可以使用响应式框架或通过JavaScript实现响应式效果。

8、动画
某些浏览器对CSS3动画效果的支持不完全，可以使用JavaScript或其他方法来实现动画效果。

9、渐变
某些浏览器不支持CSS3渐变效果，需要使用CSS3渐变的兼容性写法或JavaScript来实现渐变效果。

10、flexbox
部分浏览器不支持flexbox布局，需要使用浏览器前缀或其他方法来适配flexbox布局。