兼容IE与firefox的css 线性渐变（linear-gradient）

实现兼容IE与Firefox的线性渐变，可以通过使用CSS的filter属性和渐变图像background-image属性进行实现。具体步骤如下：

1.使用CSS的filter属性实现IE浏览器中的线性渐变：

在IE中，我们可以使用下面的代码实现线性渐变：

background: linear-gradient(to right, #ff0000, #0000ff);

但是该代码不能在IE中正常工作。为了实现IE浏览器中的线性渐变，我们需要使用CSS的filter属性将其转换为一张渐变背景图片。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff', GradientType=1);

其中，startColorstr定义了起始颜色，endColorstr定义了结束颜色，GradientType设置为1表示使用水平方向的线性渐变。

完整的CSS代码如下：

background: #ff0000; /* fallback color */
background: linear-gradient(to right, #ff0000, #0000ff); /* For Firefox 3.6 to 15 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff', GradientType=1); /* For Internet Explorer */
background: -webkit-linear-gradient(left, #ff0000, #0000ff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #ff0000, #0000ff); /* For Opera 11.1 to 12.0 */
}

1. 使用CSS的background-image属性实现Firefox中的线性渐变：

在Firefox中，我们可以直接使用CSS的linear-gradient属性实现线性渐变。

background-image: linear-gradient(to right, #ff0000, #0000ff);

完整的CSS代码如下：

background: #ff0000; /* fallback color */
background: linear-gradient(to right, #ff0000, #0000ff); /* For Firefox 3.6 to 15 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff', GradientType=1); /* For Internet Explorer */
background: -webkit-linear-gradient(left, #ff0000, #0000ff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #ff0000, #0000ff); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(right, #ff0000, #0000ff); /* For Firefox 16+ */
}

以上是兼容IE与Firefox的CSS线性渐变的攻略，下面讲解两个示例：

1. 垂直方向线性渐变

.gradient-box {
    height: 400px;
    background: #fff; /* fallback color */
    background: linear-gradient(to bottom, #ff0000, #0000ff); /* For Firefox 3.6 to 15 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff', GradientType=0); /* For Internet Explorer */
    background: -webkit-linear-gradient(top, #ff0000, #0000ff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(bottom, #ff0000, #0000ff); /* For Opera 11.1 to 12.0 */
}

1. 水平方向线性渐变

.gradient-box {
    height: 400px;
    background: #fff; /* fallback color */
    background: linear-gradient(to right, #ff0000, #0000ff); /* For Firefox 3.6 to 15 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#0000ff', GradientType=1); /* For Internet Explorer */
    background: -webkit-linear-gradient(left, #ff0000, #0000ff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #ff0000, #0000ff); /* For Opera 11.1 to 12.0 */
}

以上示例中，对于IE浏览器我们使用了filter属性，而Firefox、Safari和Opera浏览器则直接使用CSS的线性渐变属性即可。