背景浏览器兼容问题

css3：linear-gradient

.gradient{ 
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); 
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); 
} 

linear-gradient 在 ie9 以下是不支持的，所以对于 ie6 - ie8 我们可以使用滤镜来解决，代码如下：

.gradient{ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); 
}

由于 filter 是 ie 的私有属性，所以我们需要针对 ie9 单独处理滤镜效果，代码如下

:root {filter:none;} 

综上所述

.gradient{ 
background: #000000; 
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); 
background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); 
background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); 
} 
:root .gradient{filter:none;}