HTML表格THEAD和TH背景在IE

我有一个<table>与<thead>和<th>标签。HTML表格THEAD和TH背景在IE

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

来源

2010-11-13 rahim asgari

从这个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特有的样式表，让你不乱丢你的CSS与IE7组装机与IE7特定条件注释加载它。

来源

2010-11-13 06:06:53

这只是IE的表相关的错误之一... 我建议增加显示：块;或者是造型“thead tr”。

来源

2010-11-13 05:54:30

这些都不做了我的IE7任何东西，设置'显示：block'完全错位IE7以外的显示（其中，它没有任何效果可言）。 – 2010-11-13 06:11:29

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

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

所以，如果可以的话，最好的选择可能是刚背过，并在那里得到一些其他的方式，背景图片。也许你可以把它应用到桌子上，并用'顶部'来定位它？

来源

2010-11-13 05:57:49 aptwebapps

HTML表格THEAD和TH背景在IE

回答

相关问题