Question

我写了我认为非常优雅的css和表格，它以极小的带宽和没有javascript进行斑马格式化，但它在IE9中不起作用。

应该如何看待：

All browsers but IE9

它在IE9中的外观：

enter image description here

源代码：

<!DOCTYPE html>
<html>
<head>
    <title>SQLFlight HD Status</title>
    <style type="text/css">
    table {
        border-collapse:collapse;
        border-spacing:0;               
    }
    th {
        background:black;
        color:white;
    }
    tr:nth-child(odd), col:nth-child(odd) {
        background:rgba(200,200,200,0.5);
    }
    tr:nth-child(even) {
        background:rgba(255,255,255,0.5);
    }
    td,th {
        padding: 4px 10px;
    }
    </style>
    </head>
<body>
    <table>
    <col/><col/><col/><col/><col/><col/>
    <thead>
        <tr>
        <th>Drive</th><th>Label</th><th>Size</th><th>Used</th><th colspan="2">Free</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>C:</td><td>OS</td><td>136 GB</td><td align="right">74 GB</td>
        <td align="right">62 GB</td><td align="right">46 %</td>
        </tr>
        <tr>
        <td>E:</td>
        <td>Data2</td>
        <td>394 GB</td>
        <td align="right">280 GB</td>
        <td align="right">114 GB</td>
        <td align="right">29 %</td>
        </tr>
        <tr>
        <td>F:</td><td>Data3</td><td>164 GB</td><td align="right">100 GB</td><td align="right">64 GB</td><td align="right">39 %</td>
        </tr>
    </tbody>
    </table> 
    </body>
</html>

我喜欢优雅，低带宽的解决方案，而且没有大量的复杂标记。我假设问题是这个片段：

tr:nth-child(odd), col:nth-child(odd) {
    background:rgba(200,200,200,0.5);
}

我假设我测试的所有浏览器（IE9除外）都结合了tr和col样式，但IE9只允许tr样式或col样式，但不能同时使用。那么有没有一种方法来编码我的白色，浅灰色和浅灰色只有三行CSS，就像我在这里做的那样也适用于IE9？请记住，我不想在HTML中添加一堆类标记或样式标记。我是对的，它只是在IE9中失败的tr和col背景样式的组合？或者是其他在IE9中无效的东西？任何反馈，对正在发生的事情的解释以及任何简单的解决方案都将不胜感激。

感谢。

Answer 1

你不能只使用这样的东西：

tr:nth-child(odd) {
        background:rgba(200,200,200,0.5);
    }
tr:nth-child(odd) td:nth-child(even) {
        background:rgba(200,200,200,0.8);
    }
tr:nth-child(even) td:nth-child(even) {
        background:rgba(255,255,255,0.5);
    }

表Zebra，IE9中的TR和COL样式

1 个答案: