html - 在 GoogleChrome 浏览器上鼠标悬停时，表格偶数/奇数样式会更改位置

Question

我有一个如下图所示的表格，通过 css 设置了偶数/奇数行。
问题：在 Google Chrome 浏览器上刷新页面时偶数/奇数行不同，当鼠标悬停在页面或桌面上时偶数/奇数位置发生变化。
可见：http: //jsfiddle.net/uSDNg/

打开/刷新页面时：

当在页面上移动鼠标或悬停表头时：（行偶数/奇数样式更改位置）

CSS 代码：

#table_box
{
    width:100%;
    font-size: 11px;
    border-collapse: collapse;
    text-align:center;
}
#table_box th
{
    padding:7px;
    color: #292929;
}
#table_box td
{
    padding: 4px 0 4px 0;
    color: #464646;
    border:1px solid #cecece;
}
.maintb th{
    background-color:#174797;
    color:#FFF!important;
}
#table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) td { background-color:#f0f0f0} /* even*/
#table_box tr:hover td { background-color:#fffbae; } /* hovering */

HTML 代码：

<table id="table_box" class="maintb">
<tr>
    <th>سال</th>
    <th>ماه</th>
</tr>
    <tr>
        <td>1391</td>
        <td>آذر</td>
    </tr>
        <tr>
        <td>1391</td>
        <td>آبان</td>
    </tr>
        <tr>
        <td>1391</td>
        <td>مهر</td>
    </tr>
</table>

问题出在哪里？

Answer 1

将您的 CSS 更改为：

#table_box tr:nth-child(odd)  { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) { background-color:#f0f0f0} /* even*/
#table_box tr:hover { background-color:#fffbae; } /* hovering */