[分享]css兼容性写法菜鸟

通过CSS样式可以让网页看起来更加美观，但是不同的浏览器对CSS的兼容性存在很大的差异，这就导致即使在同一份代码下，不同浏览器的界面显示效果也可能完全不一样。因此，在编写CSS的时候，我们需要考虑浏...

通过CSS样式可以让网页看起来更加美观，但是不同的浏览器对CSS的兼容性存在很大的差异，这就导致即使在同一份代码下，不同浏览器的界面显示效果也可能完全不一样。因此，在编写CSS的时候，我们需要考虑浏览器兼容性这一问题。
一、统一浏览器样式
首先，我们可以使用CSS Reset来规范化不同浏览器的样式表达方式，这样可以避免浏览器间的样式差异。同时，在项目中也可以使用Normalize.css来达到这样的效果。
二、避免使用特有样式
在编写CSS时，需要尽量避免使用特有样式，因为这样的样式只能在某些浏览器中生效，而不能保证在其他浏览器中的兼容性。因此，尽量使用标准的CSS样式，如果必须使用特有样式，最好加上相应的前缀。
三、使用浏览器兼容性前缀
为了解决不同浏览器对CSS样式的实现差异，现在许多CSS属性都可以使用浏览器兼容性前缀来实现。比如，为了兼容Chrome和Safari，可以使用-webkit-前缀；为了兼容Firefox，可以使用-moz-前缀；为了兼容IE浏览器，可以使用-ms-前缀。示例代码：

-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000; 

四、使用Polyfills
如果在某些浏览器中无法使用某些CSS样式属性，可以考虑使用Polyfills来解决。Polyfills是一种JavaScript代码库，通过模拟HTML5和CSS3功能来实现某些新式特性的兼容。
总之，在编写CSS时我们需要根据不同浏览器的兼容情况来选择合适的样式属性和方法，避免使用特有样式，使用浏览器兼容性前缀和Polyfills等措施，以实现更广泛的兼容性，使网站能够最大程度地适应不同的浏览器和设备。