1. 背景介绍
在前端开发中，经常会用到列表（<ul> 或 <ol>）来展示一系列的项目或者文章。为了提升用户体验，往往需要对列表中的行进行交替背景色的设置，以增强可读性。
2. 问题描述
然而，在不同的浏览器下，特别是火狐和IE浏览器，css中的一些属性在渲染时存在差异，导致列表的行颜色在不同浏览器下显示不一致。例如，有时候奇偶行并没有正确地交替显示，而是某些行显示了相同的背景色。
3. 解决方案
3.1 利用CSS3选择器实现
在 CSS3 中引入了新的伪类选择器 :nth-child()，通过使用它可以很方便地设置列表中的行背景色。该选择器可以选择一个父元素下的特定位置的子元素，并且支持使用表达式来选择子元素。以下是使用 :nth-child() 选择器实现列表行交替背景色的代码示例：
ul li:nth-child(odd) {
background-color: #f1f1f1;
}
ul li:nth-child(even) {
background-color: #ffffff;
}
在上述代码中，ul li:nth-child(odd) 选择器选中奇数位置的列表项，ul li:nth-child(even) 选择器选中偶数位置的列表项，然后分别设置不同的背景色。
3.2 兼容火狐浏览器的解决方案
在 Firefox 浏览器中，:nth-child() 选择器的支持程度较低，如果直接使用该选择器可能会导致行颜色设置不生效。为了解决这个问题，可以配合使用 :nth-of-type() 选择器。该选择器可以选择同一类型的元素中特定位置的元素。
ul li:nth-of-type(odd) {
background-color: #f1f1f1;
}
ul li:nth-of-type(even) {
background-color: #ffffff;
}
3.3 兼容IE浏览器的解决方案
在 IE 浏览器中，:nth-child() 和 :nth-of-type() 选择器的支持程度更低，无法直接使用。但是可以借助使用 class 属性来设置交替的行背景色。
ul li {
background-color: #f1f1f1;
}
ul li.even {
background-color: #ffffff;
}
在上述代码中，对于所有的列表项都设置了一个默认的背景色，然后通过为偶数位置的列表项添加一个名为 even 的 class 属性，为其设置不同的背景色。
3.4 兼容火狐和IE的解决方案
在某些情况下，需要同时兼容火狐和IE浏览器，可以使用以下的解决方案：
ul li:nth-child(odd),
ul li.even {
background-color: #f1f1f1;
}
ul li:nth-child(even) {
background-color: #ffffff;
}
这样可以同时兼容火狐和IE浏览器，并且保持正确的奇偶行交替背景色。
4. 总结
通过使用 CSS3 的选择器 :nth-child() 和 :nth-of-type()，以及配合使用 class 属性，可以实现兼容火狐、IE等不同浏览器的列表奇偶行交替背景色。根据不同的浏览器支持程度和要求，选择合适的解决方案，可以提升网页的用户体验。