IE 中的 html 表格 thead 和 th 背景

Question

我有一个 <table>与 <thead>和 <th>标签。

两者都是 <thead>和 <th>标签有背景图片。 <thead> 的背景图片重复和背景图像 <th>位于单元格的左侧。

在 Firefox 中它工作正常但在 IE 中(我的 IE 是版本 7)<thead> 的背景图像不显示。如果我删除 <th> 的背景图片然后是<thead>的背景图片出现。

有什么建议吗？

编辑: 这是我的简化代码:

<table>
   <thead>
     <tr>
       <th>AAAA</th>
       <th>BBBB</th>
       <th>CCCC</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>1111</td>
       <td>1111</td>
       <td>1111</td>
    </tr>
   </tbody>
</table>

<style>
    thead {
      background: url(PATH TO MY IMAGE) repeat-x center /*this image is not displayed in IE*/
    }
    th {
      background: url(PATH TO MY IMAGE) no-repeat left center
    }
</style>

Answer 1

从此question开始并修改答案:

<style>
  table {
    border-collapse: collapse;
    background: url(PATH_TO_THEAD_IMAGE) repeat-x center;
  }
  tbody {
    background: #fff; /* This covers up most of the <table> background */
  }
  th {
    background: url(PATH_TO_TH_IMAGE) no-repeat left center;
  }
</style>

对您可能想要达到的目标给出一个合理的近似值。这在 Firefox 和 IE7 中似乎工作得差不多，不过我没有检查 Opera/Chrome/Safari/IE8。

您应该将这种脏乱七八糟的东西放入特定于 IE7 的样式表中，并使用特定于 IE7 的条件注释加载它，这样您就不会在 CSS 中乱扔 IE7 乱七八糟的东西。