0

我有一个样式表如下：

        .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 图像中，我假设选择器将覆盖蓝色类，并且只改变原始颜色的不透明度，使其稍微变亮。我的假设不正确吗？

在此处输入图像描述

谢谢！

4

3 回答 3

3

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

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

于 2013-08-20T14:42:07.013 回答
1

IE8 及以下（“兼容模式”是一种棘手的 IE7 仿真）既不支持rgba颜色符号也不支持:nth-childCSS 选择器。有一些针对它们的半透明背景的解决方法（例如，自动生成单像素 PNG或使用IE 专有filter属性）。

Chrome 可能在表格单元格的背景方面存在问题（例如，它错误地将背景应用于整体tr），但您的 CSSdesk 示例在 Chrome 28 和 Chrome Canary 30（以及 Safari 5.1 Win7 中）对我来说都可以正常工作。单元格似乎将两者colgroup和td背景堆叠在一起（根据CSS 规范）。因此，假设 Chrome 和其他浏览器获得相同的标记，我无法解释 Chrome 问题。

于 2013-08-20T15:37:42.480 回答
0

我最终通过为每种颜色的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;
        }
于 2013-08-21T17:12:33.750 回答