[分享]css兼容问题及汇总

CSS是网页设计中不可缺少的一部分，但是不同浏览器对CSS的解析存在兼容性问题，这就意味着我们必须要重点关注CSS的兼容性问题。下面汇总一些常见的CSS兼容问题以及解决方案。1.浏览器内核差异不同浏览...

CSS是网页设计中不可缺少的一部分，但是不同浏览器对CSS的解析存在兼容性问题，这就意味着我们必须要重点关注CSS的兼容性问题。下面汇总一些常见的CSS兼容问题以及解决方案。

1.浏览器内核差异

不同浏览器采用不同的渲染引擎，比如IE 使用的是 Trident，而Firefox 使用的是Gecko，Safari和Chrome使用的是Webkit，这也就导致了各个浏览器在CSS的解析上存在差异。

样式1： 
background-color: #f1f1f1;

样式2： 
background: #f1f1f1; 

样式1和样式2本意是相同的，但是在IE浏览器中，样式2则会被忽略掉，所以我们应尽量采用标准写法。

2.CSS语法差异

不同的浏览器对CSS语法的解析存在差异，如IE6不支持!important关键词，而Firefox、Safari等则完全支持。

3.CSS盒子模型差异

所有浏览器对盒子模型的支持存在差异，IE默认采用的是IE盒子模型，而其他浏览器使用的是W3C标准盒子模型。

IE盒子模型：width = border + padding + content；
W3C标准盒子模型：width = content； 

在开发过程中，我们可以通过将CSS中的box-sizing属性设置为 border-box来解决。

4.CSS浮动与布局问题

CSS中浮动属性是实现网页布局中很重要的一部分，但是不同浏览器对浮动属性的解析存在差异，如IE6中无法正确处理 float 属性的 margin，但是其他浏览器则不存在该问题。

总结

以上是一些常见的CSS兼容性问题及其解决方案，但是兼容性问题并没有一个统一的解决方案。在实际开发过程中，我们也需要结合具体情况进行解决。