html - 如何避免 th 元素从 IE6/7 中的 tr 元素继承属性

Question

我有一个表格，其标题上有一个重复的背景图像:

thead tr
{
   border-collapse:collapse;
   background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}

这在 Firefox 和 Internet Explorer 中都有效，但是如果我们希望某些列标题显示排序方向，我们用类 Sorted 和 Direction 修饰 th。并使用 css 添加方向图标。

  thead th.Sorted
  {
     background-repeat: no-repeat;
     background-position: center left;  
     padding-left: 0.6em;   
  }
  thead th.Sorted.Ascending
  {
     background-image: url(images/background-table-sorted-column-ascending.gif);
  }
  thead th.Sorted.Descending
  {
     background-image: url(images/background-table-sorted-column-descending.gif);
  }

问题是在 Internet Explorer 6 和 7 中，来自 tr 的背景色被继承(使用 Internet Explorer 开发人员工具栏发现)到 th。这意味着 th 在 tr 背景上绘制了 #D3D2D2 颜色。 Firefox、Chrome 和 IE8 没有这个问题，所以我怀疑是 IE6/7 的 bug。我考虑过在 thead th.Sorted 上使用 background-color:transparant 但 IE6/7 只是绘制主体背景(看起来它在另一个上切了一个洞 body 和th之间的层)。

它应该是这样的:

这是它在 IE6 和 IE7 中的样子:

下面是我为这个问题创建的 HTML 片段。

  <table cellspacing='0'>
    <thead>
      <tr>
        <th>First column</th>
        <th>Second column</th>
        <th class="Sorted Ascending">Third column</th>
        <th>Fourth column</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
        <td>Data</td>
      </tr>
    </tbody>
  </table>

我该如何解决这个问题？

Answer 1

IE 似乎有一个错误 - 它将 tr 的背景图像呈现为单元格的背景图像，因此单元格的图像覆盖了行的图像。 thead 元素存在同样的错误，但它似乎与 table 元素一起工作。
因此，您可以将背景图像应用于表格而不是标题行:

table
{
   background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}

因为背景图像在表格上，它可能会超出标题行，所以您可能还想设置 tbody 或其 tr 的背景颜色:

tbody
{
   background-color: #fff;
}