如何避免从在IE6 / 7 tr元素继承属性一个th元素(How to avoid a th ele

我有这对头部重复的背景图像的列表：

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

这一点也适用于跨Firefox和Internet Explorer的，但如果我们希望某些列标题，以显示排序方向我们装饰与类排序和方向的位。并使用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开发人员工具栏）的位。这意味着次油漆#D3D2D2在TR背景颜色。火狐，Chrome和IE8没有这个问题，所以这是一个IE6 / 7的错误，我怀疑。我考虑使用background-color:transparant上thead th.Sorted但IE6 / 7只是描绘主体背景（看起来它切割一个孔在所述主体和所述th之间的其它层）。

这是应该的样子：

这是怎么看起来像在IE6和IE7：

下面是我snipppet对这个问题产生的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浏览器有一个bug -它呈现tr的背景图像单元格的背景图像，所以细胞的图像将覆盖该行的形象。同样存在错误的thead元素，但它似乎与表格元素很好地工作。
所以，你可以将你的背景图像表，而不是标题行：

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

由于背景图像是在桌子上，可能超出标题行，所以你可能还需要设置的背景颜色tbody或其tr S：

tbody
{
   background-color: #fff;
}

Answer 2:

这是奇怪...因为这只是正常（虽然我不使用的图像，它应该是相同的，？

<html>
<head>
    <style type="text/css">
    thead tr{
        background-color:#000;
                    color: #fff;
    }
    th.sorted.Ascending{
        background-color:#fff;
                    color: #000;
    }
    th.sorted.Descending{
        background-color:#AAA;
    }

    </style>
</head>
<body>
    <table>
        <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>
</body>
</html>

// //编辑您可能要做到这一点，而不是：

background: #FFFFFF url(http://www.tizag.com/pics/cssT/smallPic.jpg) no-repeat scroll 0 0;

Answer 3:

它看起来像在IE浏览器中的错误。我试了一下，而不对单元格背景图片：

thead tr
{
   border-collapse:collapse;
   background-image:url(http://www.freefoto.com/images/1223/09/1223_09_1---Big-Blue-Sky--Montana--USA_web.jpg);
   background-color:gray;
}

  thead th.Sorted
  {
     background-repeat: no-repeat;
     background-position: center left; /** this line changes the position! */  
     padding-left: 0.6em;   
  }

和底色的图像被重新定位在该小区！我想IE渲染行的背景一个单元在同一时间。
你可能要在该小区添加其他元素。

好了，另一个想法：
这似乎是工作确定，如果你把背景图像上table元素。 thead也是越野车。你可以尝试，包括他们两个（表和TR），通过添加规则：

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

文章来源: How to avoid a th element from inheriting properties from a tr element in IE6/7