谷歌與tr背景鉻錯誤

Question

我試圖設置一個表格行的背景圖像，但背景是適用於所有的TD兒童。

在IE7中有相同的錯誤，但它是解決

tr { 
    position: relative; 
} 

任何有關它的暗示？

謝謝

Answer 1

這是我知道的唯一解決方案，而不使用JavaScript。它具有指定TR和TD高度的缺點，因爲TR是絕對定位的。我也不確定它在其他瀏覽器中的表現如何。

<style> 
    tr { 
     position: absolute; 
     background: url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat; 
     height: 200px; 
     border: 1px solid #00f; 
    } 
    td { 
     width: 200px; 
     height: 200px; 
     border: 1px solid #f00; 
    } 
</style> 

<table cellpadding="0" cellspacing="0"> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

Answer 2

這對我的作品在所有瀏覽器：

tr { 
background: transparent url(/shadow-down.gif) no-repeat 0% 100%; 
display: block; 
position: relative; 
width: 828px; 
} 

tr td{ 
background: transparent; 
} 

Answer 3

瀏覽器（WebKit的）覆蓋的位置：相對的錶行，並計算風格靜態的。錯誤或功能 - 這可以防止位置：IE7中使用的相對修復。

溶液中使用固定的（已知的）小區大小時： TR { 浮子：左; }

並將適當的單元格大小添加到表中的所有單元格（通過類或內聯樣式）。我還添加了行大小，但解決方案可能不需要。

我不需要動態單元大小的解決方案，所以我一直沒有去探索這個用例。

Answer 4

我建議直接設置表格單元格的背景圖像，將所有後續單元格的背景位置向左移動，使其看起來應該如此。這樣你就不必切分你的背景圖像。

Answer 5

tr樣式標籤包括Style='Display:inline-table;'它適用於所有瀏覽器。

Answer 6

我最終什麼事做的是：

table.money-list tr { 
background: url(images/status-2.gif) no-repeat; 
} 
@media screen and (-webkit-min-device-pixel-ratio:0) { 

    /*Chrome CSS here*/ 
    table tbody tr td:first-child { 
    background-image: none; 
    background-color: transparent; 
} 

table tr td{ 
    background-color: #FFFFFF; 
} 
} 

因此，大家可以看到，只是設置背景顏色到每一個TD，但第一位的，而目標的Webkit。

Answer 7

這是我的jQuery解決方案。這是一個thead tr，但也應該爲tbody tr工作。

$(document).ready(function() { 
    // Apply <thead><tr> background row fix for Chrome/Safari (webkit) 
    if ($.browser.webkit) { 
     $('thead tr').each(function (i) { 
      var theadWidth = $(this).width()-1; 
      $(this).append('<div style="position:absolute;top:'+$(this).position().top+'px;left:'+$(this).position().left+'px;z-index:0;width:'+theadWidth+'px;height:'+($(this).height()+8)+'px;background:#2e4b83 url(th_background.jpg) no-repeat 0 0;background-size:'+theadWidth+'px 100%;"></div>'); 
     }); 
    } 
}); 

您可以在Chrome/Firefox/IE9中查看。它應該看起來一樣。

Answer 8

沒有提到的解決方法對我來說很合適。這是我結束了：

TABLE TBODY.highlight { 
    background-image: url(path/image.png); 
} 

TABLE>* { 
    float: left; 
    clear: both; 
} 

僅適用於Chrome和Firefox測試，所以不知道它是如何工作的IE瀏覽器（對我來說並不重要），但對我來說這完美的作品！