css常见浏览器兼容问题

CSS是现代网页设计中非常重要的一部分，然而，不同的浏览器之间对CSS样式的支持是不同的，这就导致了一些常见的浏览器兼容问题。 1. 盒模型问题 不同浏览器的盒模型计算方式是不同的。IE6及以下版本使用的是IE盒模型，也就是盒模型的宽高包括了padding和border，而标准盒模型则是只计算content部分的宽高。这就导致了在不同浏览器下宽高计算不一致的问题。解决方法是在CSS中指定盒模型的计算方式，例如：Box-sizing:border-Box;就是强制使用IE盒模型。

.Box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 10px solid #000;
  Box-sizing: border-Box; /* 强制使用IE盒模型 */
}

2. 渐变问题 CSS3中的渐变效果可以实现很多酷炫的效果，但是在不同浏览器下支持程度不同。IE浏览器不支持线性渐变，只支持IE滤镜效果，而Chrome、Firefox等浏览器支持的非常好。解决方法是使用CSS3前缀来指定不同浏览器所支持的渐变定义方式。

/* 兼容webkit内核和标准写法 */
background: linear-gradient(to bottom,#fff,#000);
background: -webkit-linear-gradient(top,#000);

3. flex布局问题 CSS3中的flex布局可以让我们方便的制作响应式布局，但是IE浏览器对于flex布局的支持不是很完善。解决方法是可以使用flex布局的polyfill插件，这个插件可以让低版本浏览器也支持flex布局。

/* 引入flex布局的polyfill插件 */

总结： 以上就是一些CSS常见浏览器兼容问题及其解决方案，开发者在进行页面开发的时候，应该时刻注意兼容性问题，避免出现不同浏览器展现不一样的情况。