Question

我有一张桌子，标题上有重复的背景图片：

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

这适用于Firefox和Internet Explorer，但如果我们希望某些列标题显示排序方向，我们将使用Sorted和Direction类来装饰它。并使用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 Developer Toolbar找到）。这意味着在tr背景上涂上#D3D2D2颜色。 Firefox，Chrome和IE8没有这个问题，所以这是我怀疑的IE6 / 7错误。我想在background-color:transparant上使用thead th.Sorted，但IE6 / 7只是描绘了身体背景（看起来它在身体和th之间的其他层中切出了一个洞）。

这应该是这样的：

这就是它在IE6和IE7中的样子：

下面是我为此问题创建的HTML snipppet。

  <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
{
   background: #D3D2D2 url(images/background-table-header.gif) repeat-x top;
}

由于背景图片位于桌面上，因此可能会超出标题行，因此您可能还需要设置tbody或其tr的背景颜色：

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也有错误。您可以尝试将它们（table和tr）包括在内，方法是添加规则：

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

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

3 个答案: