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。

你应该将这种脏的kludge放入一个特定于IE7的样式表中，并使用IE7特定的条件注释加载它，这样你就不会乱用你的CSS与IE7 kludges。

Answer 2

这只是IE与表相关的错误之一...... 我建议添加display：block;对thead，或称为“thead tr”。

Answer 3

这不是一个完整的解决方案，但我还不能发表评论。

IE似乎将thead规则应用于th元素。将'repeat-x'更改为'no-repeat'并将th和td的宽度设置为比背景图像宽得多的值并删除背景图像。你会看到每一个重复的thead图像...所以当你为th启用背景图像时，你基本上会覆盖thead的背景图像。这绝对不是正确的行为，但你去了。

所以，如果可以的话，最好的选择可能就是退出并以其他方式获取背景图像。也许你可以将它应用到桌面而使用'top'来定位它？

在IE中的HTML表格thead和背景

3 个答案: