要实现一个在IE和Firefox浏览器中都兼容的CSS线性渐变效果，可以通过针对不同的浏览器使用不同的属性和语法。在本例中，主要讨论的是在Web页面中创建垂直和水平的渐变背景色，并且提供了一系列浏览器的兼容性写法。
介绍CSS的线性渐变功能（linear-gradient），它允许开发者定义一个元素从一种颜色过渡到另一种颜色的视觉效果。线性渐变沿着一条直线进行颜色过渡，可以设定渐变的方向和颜色变化。
IE浏览器（特别是IE9之前的版本）不支持标准的线性渐变语法，但是提供了自己的滤镜（filter）属性来实现渐变效果。IE的滤镜属性如下：
```css
filter: progid:DXImageTransform.Microsoft.Gradient(
startColorStr='#FF0000',
endColorStr='#F9F900',
gradientType='0'
);
```
这里的参数 `startColorStr` 和 `endColorStr` 分别定义了渐变的起始和结束颜色，而 `gradientType` 参数设置为 '0' 表示垂直渐变，设置为 '1' 表示水平渐变。
对于Firefox浏览器，可以使用 `-moz-linear-gradient` 属性：
```css
background: -moz-linear-gradient(top, #FF0000, #F9F900);
```
其中，`top` 表示渐变的方向是垂直的，从上到下。`#FF0000` 是起始颜色，`#F9F900` 是结束颜色。若要实现水平渐变，可以将 `top` 替换为 `left`。
对于Opera浏览器，使用 `-o-linear-gradient` 属性，其语法与Firefox类似：
```css
background: -o-linear-gradient(top, #FF0000, #F9F900);
```
对于Webkit内核的浏览器（如Chrome和Safari），可以使用 `-webkit-gradient` 属性，它提供了更详细的渐变参数设置：
```css
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
```
这里的参数分别定义了渐变类型（`linear`）、起点坐标、终点坐标、起始颜色和结束颜色。当第一个和第三个参数值相同的时候，表示垂直渐变，第一个和第二个参数相同而第三个和第四个参数不同时，表示水平渐变。
演示了如何在HTML文档中应用这些兼容性写法。创建了两个不同的类 `.test1` 和 `.test2`，分别展示了垂直和水平渐变。示例代码如下：
```css
.test1 {
background: -moz-linear-gradient(top, #FF0000, #F9F900); /* Firefox */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); /* Webkit */
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000', endColorStr='#F9F900', gradientType='0'); /* IE */
}
.test2 {
background: -moz-linear-gradient(left, #FF0000, #F9F900); /* Firefox */
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900)); /* Webkit */
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000', endColorStr='#F9F900', gradientType='1'); /* IE */
}
```
通过以上设置，开发者可以创建兼容IE和Firefox以及其他主流浏览器的线性渐变效果。需要注意的是，随着浏览器的更新迭代，标准CSS语法的支持度在不断提高，因此建议在使用旧语法的同时，不断检查并更新以使用更简洁和标准的CSS3渐变语法。
