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

回答

相關問題