屬性可以得到和CSS（變量？）設置

Question

我試圖做一個CSS只斑馬錶是兼容IE 7

我嘗試這樣做：

.zebra { 
    border-collapse: collapse; 
} 
.zebra tr:first-child { 
    background-color: #7BCC70; 
    vertical-align: top; 
} 

.zebra tr[valign=top] + tr { 
    color: #EEE; 
    vertical-align: bottom; 
} 
.zebra tr[valign=bottom] + tr { 
    color: #7BCC70; 
    vertical-align: top; 
} 

由於第一條規則，垂直對齊不會影響任何內容。我把第一個tr的顏色設置爲color1，垂直對齊到indicator1。然後我嘗試使用valign來獲得tr的垂直對齊，但這不起作用。 vertical-align不是valign，就像bgcolor不是背景色一樣。我可以得到valign，但我無法設置它。我可以設置垂直對齊，但我無法通過CSS獲取它。你能想到可以在CSS中設置和獲得的東西嗎？

.zebra是表，這是常規的：

<table class="zebra" border="0"> 
<tr> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
</tr> 
<tr style="background-color: white;"> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
</tr> 
<tr> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
</tr> 
<tr> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
</tr> 
<tr> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
</tr> 
<tr> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
</tr> 
<tr> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
</tr> 
<tr> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
    <td>cell</td> 
</tr> 
</table> 

你自找的。

Answer 1

我敢肯定IE7不支持與行的動態數表內選擇奇數或偶數行的一個很好的方式，沒有你標記起來這樣：

tr.odd { background-color:#7bcc70; } 
tr.even { background-color:#eee; } 

<table> 
    <tr class="odd"> 
    <td></td> 
    </tr> 
    <tr class="even"> 
    <td></td> 
    </tr> 
</table> 

或者，你可以使用jQuery腳本做的工作適合你，喜歡這裏提到：http://masterdev.dyndns.dk/dev/16.html

就個人而言，我用這個（現代瀏覽器）：

.zebra tr:nth-child(odd) { background-color: #7bcc70; } 
.zebra tr:nth-child(even) { background-color: #eee; } 

<table class="zebra"> 
    <tr> 
    <td></td> 
    </tr> 
    <tr> 
    <td></td> 
    </tr> 
</table> 

注意THI s不需要你標記每一行。我回到了舊版瀏覽器的正常（非斑馬）表。但是，通過我的項目，我可以獲得一定程度的優雅退化。