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

【问题标题】：How to avoid a th element from inheriting properties from a tr element in IE6/7如何避免 th 元素从 IE6/7 中的 tr 元素继承属性
【发布时间】：2010-10-24 11:02:40
【问题描述】：

我有一张表，它的表头上有一个重复的背景图片：

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 错误。我曾考虑在thead th.Sorted 上使用background-color:transparant，但IE6/7 只是绘制身体背景（看起来它在身体和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>

我该如何解决这个问题？

【问题讨论】：

标签： html cross-browser css

【解决方案1】：

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

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

因为背景图片在桌子上，它可能会超出标题行，所以您可能还想设置tbody或其trs的背景颜色：

tbody
{
   background-color: #fff;
}

【讨论】：

【解决方案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;

【讨论】：

感谢您的回答，但这不是我遇到的问题，问题是我不想为 th 设置新的背景颜色，我只想在左侧，只是透明。因为它下面的 tr 已经有重复的背景图片了。

【解决方案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 也有问题。您可以尝试通过添加规则来包含它们（table 和 tr）：

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

【讨论】：

是的，IE 和 FF 都为每个单元格绘制背景（将 cellpadding 设置为 5，你会看到）但在你的问题仍然存在，为什么 th 继承了 tr background-image ？你提议在 th 的一侧添加一个额外的元素只是为了能够设置背景？我希望避免这种解决方案，但我会尝试一下..
我知道，我的代码不能解决这个问题。这是错误的示例（？）。即使单元格没有图像，也会移动单元格的父级背景图像。
你说得对，我只是想弄清楚它确实为每个单元格渲染的事实不是问题，但是在决定为单元格渲染什么时，它使用了错误的逻辑。而且您的示例确实显示了重现此错误的另一种方法。
您使用表格背景的解决方案确实有效，并且比添加额外组件要干净得多。我建议将该答案拆分为一个单独的答案，并解释它是如何工作的，并且 tbody tr 可能应该有一个背景颜色：#fff;。因此，请根据您的建议创建一个不错的答案，以便 Google 用户可以找到它，我会接受它作为答案。