[分享]css兼容性ie8

在实际的前端开发过程中，css兼容性一直是一个非常重要的问题，尤其是对于一些老版IE浏览器的兼容性，比如IE8。/ IE8 hack / .myclass{ background: fff; / 非I...

在实际的前端开发过程中，css兼容性一直是一个非常重要的问题，尤其是对于一些老版IE浏览器的兼容性，比如IE8。

/* IE8 hack */
.my-class{
  background: #fff; /* 非IE8浏览器 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5'); /* IE8浏览器 */
} 

在上面的代码片段中，我们可以看到利用了CSS Hack的技巧，通过filter属性来指定IE8特有的渐变属性。

除此之外，我们还需要注意盒模型的兼容性问题。在标准的盒模型中，元素的宽度和高度包含了padding和border的部分。但是在IE8及以下版本中，盒模型是怪异模式，元素的宽度和高度不包含padding和border的部分，而是包括了这些部分的内容和框线。

/* IE8 box-sizing hack */
.my-class{
  box-sizing: border-box; /* 标准浏览器 */
  -moz-box-sizing:border-box; /* Firefox浏览器 */
  -webkit-box-sizing:border-box; /* Safari 浏览器及 Chrome 浏览器 */
  *behavior: url(boxsizing.htc); /* IE7、8浏览器*/
} 

为了解决这个问题，我们可以使用box-sizing属性来规定盒模型的计算方式，同时针对IE8及以下版本，还需要通过*behavior属性来引入boxsizing.htc文件来修正盒模型的计算方式。

在编写css代码时，一定要时刻注意IE8浏览器的兼容性问题，避免在浏览器兼容方面出现问题。