rgba在IE10兼容性，IE8或Chrome中无法正常工作

Question

我有一个样式表如下：

        .blue {
            background: #B0C4DE;
        }

        .green {
            background: #a4d5a8;
        }
        .purple {
            background: #ada4d4;
        }
        .pink {
            background: #e3b3e0;
        }
        .yellow {
            background: #e0e3ab;
        }
        tbody tr:nth-child(odd) td{
            background: #FFFFFF; /*fallback color */
            background: rgba(255, 255, 255, .50);
        }

我希望按颜色分组的列具有交替的行不透明度，以创建斑马条纹效果。我这样做是通过为每列分配CSS类，这里没有内联样式，并将nth-child(odd) CSS选择器与rgba属性结合使用。

但是，在兼容模式的IE10和Chrome中，渲染了以下网格，颜色和白色交替排列：

在IE8中，似乎忽略了rgba属性：

我的CSS不正确吗？还有什么我可以包括哪些有助于调试？我在.NET中创建了这个应用程序，所以我很遗憾无法链接到小提琴。

编辑：白行是错误的。它们应该是列分组颜色稍微浅一些。有关示例，请参阅http://cssdeck.com/labs/6rgab657。

编辑：在Chrome Inspector的下图中，我假设选择器会覆盖蓝色类，并且只改变原始颜色的不透明度，使其略微变浅。我的假设是不正确的？

谢谢！

Answer 1

IE8不支持RGBA，它只支持纯色。

http://css-tricks.com/rgba-browser-support/

Answer 2

IE8及以下版本（“兼容模式”是一种棘手的IE7仿真）既不支持rgba颜色表示法，也不支持:nth-child CSS选择器。针对它们的半透明背景有一些解决方法（例如auto-generating of one-pixel PNG或使用IE propritary filter property）。

Chrome可能会遇到表格单元格背景问题（例如，它会错误地将背景应用于整个tr），但您的CSSdesk示例可以在Chrome 28和Chrome Canary 30中正常使用（以及Safari 5.1 Win7）。这些单元格似乎将colgroup和td背景堆叠在另一个上（根据CSS spec）。因此，如果Chrome和其他浏览器获得相同的标记，我就无法解释Chrome问题。

Answer 3

我最后通过为每种颜色的nth-child(odd)选择器添加特定样式来修复此问题：

        .blue {
            background: #B0C4DE;
        }

        .green {
            background: #a4d5a8;
        }
        .purple {
            background: #ada4d4;
        }
        .pink {
            background: #e3b3e0;
        }
        .yellow {
            background: #e0e3ab;
        }

        /*Color the odd rows with a lighter shade
        maintains zebra stripe while sorting via jQuery*/
        tbody tr:nth-child(odd) td.blue{
            background: #E6E6FA;
        }
        tbody tr:nth-child(odd) td.green{
            background: #ddf5de;
        }
        tbody tr:nth-child(odd) td.purple{
            background: #c7c6f4;
        }
        tbody tr:nth-child(odd) td.pink{
            background: #fae1fa;
        }
        tbody tr:nth-child(odd) td.yellow{
            background: #f5f8dd;
        }