表斑马，造型TR和COL在IE9

我写了什么，我认为是非常优雅的CSS和表格，做斑马用很少的带宽和没有JavaScript格式，但它不能在IE9工作。表斑马，造型TR和COL在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>

我喜欢优雅，低带宽的解决方案没有很多的convo推定标记。我认为这个问题是这样的片段：

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

我假设所有我已经测试，除了IE9浏览器，结合TR和col造型，但IE9只允许TR造型或山坳造型，但不两者在同一时间。那么有没有一种方法可以编写我的白色，浅灰色和浅灰色，只需三行CSS就可以实现，就像我在这里所做的那样，也可以在IE9中使用？请记住，我不想为我的HTML添加一堆类标签或样式标签。我是对的，它只是在IE9中失败的tr和col背景样式的组合？或者是其他东西不能在IE9中工作？任何反馈，解释发生什么以及任何简单的解决方案将不胜感激。

谢谢。

来源

2011-09-27 Robert Louis Murphy

你就不能使用这样的：

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-27 15:56:59 Gerben

是的，这工作。我想知道，如果我的原始方法在IE9中不能正常工作，或者因为tr样式在tr样式定义时应该替换col样式。我只是不想为IE添加额外的代码。 –

我认为IE浏览器的FPGA实现并不真的觉得TR作为一个可见的元素，但更像是一个容器元素，像THEAD和TBODY。所以它的实现背景设置在TR上，把这个背景放在包含td的背景上，除非td的背景已经被CSS设置。这是我的猜测。此外，我不认为IE浏览器是错误的，Chrome是正确的。我认为该规范为这些实施差异留下了余地。 – Gerben

表斑马，造型TR和COL在IE9

回答

相关问题