如何避免th元素从IE6 / 7中的tr元素继承属性 [英] How to avoid a th element from inheriting properties from a tr element in IE6/7

问题描述

我有一个在标题上有重复背景图片的表格：

I've got a table which has a repeating background image on the header:

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

这在Firefox和Internet Explorer中都可以使用，列标题显示排序方向我们用类Sorted和方向装饰th。并使用css添加方向图标。

And this works across in both Firefox and Internet explorer, but if we want certain column headers to show the sorting direction we decorate the th with the class Sorted and the Direction. And use css to to add a direction icon.

  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的错误，我怀疑。我想到在 thead th.Sorted 上使用 background-color：transparant ，但IE6 / 7只是画身体背景（它看起来像在身体和th之间的其他层切开一个洞）。

The problem is that in Internet Explorer 6 and 7 the background-color from the tr is inherited (found out using Internet Explorer Developer Toolbar) to the th. Which means the th paints #D3D2D2 color over the tr background. Firefox, Chrome and IE8 do not have this problem, so it's a IE6/7 bug I suspect. I thought about using a background-color:transparant on the thead th.Sorted but IE6/7 just paints the body background (it looks like it cuts a hole in the other layers between the body and the th).

这应该是这样：

正确解释css / html http://i42.tinypic.com/wjg8q1.png

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

And this is how it looks like in IE6 and IE7:

IE6和IE7错误渲染http://i40.tinypic.com/2i7692c.jpg

下面是我创建的HTML snipppet

Below is the HTML snipppet I created for this question.

  <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>

我如何解决这个问题？

推荐答案

看起来IE有一个bug - 它将 tr 的背景图片作为单元格的背景图片，因此单元格的图片覆盖行的图像。对于 thead 元素存在相同的错误，但它似乎与表元素一起工作。

因此，您可以将您的背景图像应用于表格而不是标题行：

It seems IE has a bug - it renders the tr's background image as the cell's background image, so the cell's image overrides the row's image. The same bug exists for the thead element, but it seems to work well with the table element.
So, you can apply your background image to the table instead of the header row:

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

因为背景图片在表格上，因此您可能还需要设置 tbody 或其 tr 的背景颜色：

Because the background image is on the table it may extend beyond the header row, so you may also want to set the background color of the tbody or its trs:

tbody
{
   background-color: #fff;
}

这篇关于如何避免th元素从IE6 / 7中的tr元素继承属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！