HTML表格THEAD和IE个背景问题 [英] html table thead and th background problem in IE

问题描述

我有一个＆LT;表＆gt; 与＆LT; THEAD＆GT; 和＆LT;次方式＆gt; 标签

两者＆LT; THEAD＆GT; 和百分位＆GT; 标记的背景图像。背景图片＆LT; THEAD＆GT; 重复和背景图像百分位＆GT; 定位在左侧细胞

在FF它工作正常，但在IE（我的IE 7版本）＆LT的背景图像; THEAD＆GT; 不显示。如果我删除的＆LT背景图像;第i 然后的背景图像＆LT; THEAD方式＆gt;出现

任何建议？

编辑：
这里是我的simpilified code：

 ＆LT;表＆gt;
   ＆LT;＆THEAD GT;
     ＆所述; TR＆GT;
       ＆LT;第i个AAAA＆LT; /第i
       ＆LT;第i BBBB＆LT; /第i
       ＆LT;第i CCCC＆LT; /第i
     ＆LT; / TR＆GT;
   ＆LT; / THEAD＆GT;
   ＆LT;＆TBODY GT;
     ＆所述; TR＆GT;
       ＆所述; TD＆GT 1111所述; / TD＆GT;
       ＆所述; TD＆GT 1111所述; / TD＆GT;
       ＆所述; TD＆GT 1111所述; / TD＆GT;
    ＆LT; / TR＆GT;
   ＆LT; / TBODY＆GT;
＆LT; /表＆gt;＆LT;风格＆GT;
    THEAD {
      背景：网址（PATH TO MY IMAGE）重复-X中心/ *这种形象不是在IE中显示* /
    }
    日{
      背景：网址（PATH TO MY IMAGE）不重复左侧中心
    }
＆LT; /风格＆GT;
 

解决方案

此<起始href=\"http://stackoverflow.com/questions/834069/how-to-avoid-a-th-element-from-inheriting-properties-from-a-tr-element-in-ie6-7\">question并修改了答案：

 ＆LT;风格＆GT;
  表{
    边境崩溃：崩溃;
    背景：网址（PATH_TO_THEAD_IMAGE）重复-X中心;
  }
  TBODY {
    背景：#FFF; / *这涵盖了大部分的＆lt的;表＆gt;背景 */
  }
  日{
    背景：网址（PATH_TO_TH_IMAGE）无重复左侧中心;
  }
＆LT; /风格＆GT;
 

给出了什么你可能想实现一个合理的近似。这似乎是工作pretty多在Firefox和IE7一样的，我没有检查歌剧/铬/ Safari / IE8虽然。

您应该把这种肮脏的杂牌的成IE7特定样式表，并让你不乱丢你的CSS IE7的组装机与IE7特定条件注释加载它。

I have a <table> with <thead> and <th> tags.

Both <thead> and <th> tags have background images. background image of <thead> is repeated and background image of <th> is positioned on the left side of the cell.

In FF it works fine but in IE (my IE is version 7) the background image of <thead> is not displayed. if i remove the background image of <th> then the background image of <thead> appears.

Any suggestion?

EDIT: Here is my simpilified code:

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

解决方案

Starting from this question and modifying the answer:

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

Gives a reasonable approximation of what you're probably trying to achieve. This seems to work pretty much the same in Firefox and IE7, I didn't check Opera/Chrome/Safari/IE8 though.

You should put this sort of dirty kludge into an IE7-specific stylesheet and load it with an IE7-specific conditional comment so that you don't litter your CSS with IE7 kludges.

这篇关于HTML表格THEAD和IE个背景问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！