css 兼容性书写记录

CSS兼容性问题指的是在不同的浏览器或平台下，同一段CSS代码可能会表现出不同的效果。为了解决这个问题，我们通常要采用兼容性书写方式。

1. 兼容性问题的原因

• 浏览器——不同浏览器对CSS的支持程度不同。
• 平台——不同操作系统下的相同浏览器对CSS的支持程度也会不同。

因此，当我们写CSS时，如果只考虑某一种浏览器或平台，很容易导致其他浏览器或平台上效果出现问题。

2. 兼容性书写规则

2.1 使用浏览器前缀

不同浏览器厂商对某些CSS属性可能会有自己的实现方式，这就需要我们在CSS中使用浏览器前缀进行区分。通常的浏览器前缀有：

• -webkit- (Chrome和Safari浏览器)
• -moz- (火狐浏览器)
• -ms- (IE浏览器)
• -o- (Opera浏览器)

比如，我们要给某个元素添加渐变效果：

/* 兼容性写法 */
background: -webkit-linear-gradient(red, yellow);  /* Safari 5.1-10.1, Chrome 10-25 */
background: linear-gradient(to bottom right, red, yellow); /* 标准写法 */

在上例中，我们使用了-webkit-前缀来为Safari和Chrome浏览器提供渐变效果。

2.2 使用CSS Hack

CSS hack是一种针对特定浏览器或浏览器版本的CSS代码写法，通过巧妙的利用浏览器的bug或特性来实现不同浏览器的兼容性问题。

比如，我们要向IE6浏览器下的某个元素添加特定宽度：

/* 兼容性写法 */
width: 200px; /* 标准写法 */
width: 150px\9; /* IE6专用写法，\9表示只对IE6生效 */

在上例中，我们使用了CSS hack来仅对IE6浏览器下的宽度进行调整。实际上，CSS hack并不推荐使用，因为它是一种“临时”的解决方案，而且后期维护成本较高。

3. 总结

在CSS的编写过程中，兼容性问题是我们必须要面对的一个问题。我们可以采用各种方法去解决这个问题，比如使用浏览器前缀或CSS hack等方式。但需要注意的是，兼容性问题的存在是一种客观事实，我们只能尽量通过各种手段去规避这个问题，而不能完全解决。同时，为了提高CSS的可维护性和可读性，我们应该尽量避免使用复杂的兼容性规则，或者尝试寻找更加优美的解决方案。