0

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

它应该看起来如何：

除 IE9 以外的所有浏览器

它在 IE9 中的外观：

在此处输入图像描述

源代码：

<!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 中不起作用？任何反馈、对正在发生的事情的解释以及任何简单的解决方案都将不胜感激。

谢谢。

4

1 回答 1

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);
    }
于 2011-09-27T15:56:59.387 回答