IE7父母與子女背景圖像的顯示問題

我在使用IE7顯示錶格時出現問題（不用擔心它用於表格數據），其中表格行具有在x軸上重複的背景圖像，表格部分（在這種情況下是TH）具有單獨的背景圖像，根本沒有重複。IE7父母與子女背景圖像的顯示問題

下面是一個例子：

http://cdn.bkit.ca/misc/juniors-table-problem.png

這裏的CSS：

<style> 

table, 
td, 
th, 
tr { 
    border: none; 
} 

table tr { 
    border-bottom: 1px solid #BEBEBE; 
} 

table td { 
    padding: 7px; 
    border-left: 1px solid #BEBEBE; 
    border-right: 1px solid #BEBEBE; 
} 

table th { 
    padding: 7px; 
    text-align: left; 
} 

table .header { 
    background-image: url(/images/layout/nav_background.png); 
    background-position: top; 
    background-repeat: repeat-x; 
    height: 37px; 
    border: none; 
    margin: 2px; 
} 

table .header th { 
    color: white; 
    font-weight: normal; 
    text-align: center; 
} 

table .header th.first { 
    background-color: transparent; 
    background-image: url(/images/layout/nav_left.png); 
    background-repeat: no-repeat; 
    background-position: top left; 
} 

table .header th.last { 
    background-image: url(/images/layout/nav_right.png); 
    background-repeat: no-repeat; 
    background-position: top right; 
    background-color: transparent; 
} 

</style>

而這裏的HTML：

<table> 
    <tr class="header"> 
     <th class="first">a</th> 
     <th>b</th> 
     <th class="last">a</th> 
    </tr> 
</table>

請不要責備我的CSS，一些它是「噴灑和祈禱」CSS希望修復它。

所以我不能爲我的生活找出爲什麼我有這個問題。 IE8沒有這個問題。

任何想法？

來源

2009-11-19 bkorte

如果您發佈的圖像是表格的前兩個單元格的屏幕截圖，則問題可能是第一個單元格第二個行正在調整列的大小。所以你的單元格，我們稱之爲0x0，正在調整大小的是列中所有單元格的內容。

如果要使用重複背景，我們總是需要思考智能，如果我是你，我會創建2個單獨的背景圖片（請檢查圖片底部的這篇文章，我不能把它放在這裏它打破了我的代碼...）。

然後，使用這些樣式：

table .header { 
     background:none 
     height: 37px; 
     border: none; 
} 
table .header th.first { 
     background: url(/images/layout/[my-image-2].png) left no-repeat; 
} 

table .header th.last { 
     background: url(/images/layout/[my-image-2].png) right no-repeat; 
} 

table .header th.middle { 
     background: url(/images/layout/[my-image-1].png) repeat-x; 
} 

<table> 
    <tr class="header"> 
      <th class="first">a</th> 
      <th class="middle">b</th> 
      <th class="last">a</th> 
    </tr> 
    <tr> 
     <td>this cell is resizing cell above</td> 
     <td>content</td> 
     <td>this cell is resizing cell above</td> 
    <tr> 
</table>

我們正在做的事情是：

去除背景從tr元素作爲tr不接受背景。
將背景編號2設置到中間部分並在x方向上重複。
使用我們的背景編號1上的.first單元格，並將其對齊到左側，並在.last上執行相同操作並對齊到右側。

如果您的.first和.last比我的示例背景更長，那麼您可以簡單地擴展圖像。

這應該解決您的問題。

來源

2009-11-20 00:21:22 rochal

第一/ lass類可能會覆蓋tr背景。你能擴展你的左/右PNG的寬度，以便它們延伸覆蓋整個單元格嗎？

來源

2009-11-19 23:45:21

IE7父母與子女背景圖像的顯示問題

回答

相關問題