CSS/Webkit：表格行的背景圖片

由於某些原因，當您將背景圖片應用於Safari/Chrome中的tr時，會將其呈現爲好像該規則適用於每個td。CSS/Webkit：表格行的背景圖片

火狐：

Firefox http://www.whyprime.com/temp/table-firefox.png

Safari瀏覽器：

Safari http://www.whyprime.com/temp/table-safari.png

我發現這篇文章討論的修復程序：

http://snook.ca/archives/html_and_css/applying_a_back

我能夠使用spacer gif在IE中工作，但無法解決Safari的問題。

http://www.whyprime.com/temp/table-background.html

來源

2009-12-24 Jason Keene

而你的代碼會在哪裏？ – 2009-12-24 15:37:06

將你的表總是隻有2行？如：

<table> 
    <tr> 
    <td></td> 
    <td></td> 
    </tr> 
</table>

如果是這樣，一個簡單但並不過分優雅的解決方案將是您的背景圖像分割成兩個圖像，並應用CSS類的左，右列，將箭頭的一半到右側左側立柱，並在右列的左側：

<table> 
    <tr> 
    <td class="left"></td> 
    <td class="right"></td> 
    </tr> 
</table>

然後你的CSS可能類似於：

td.left 
{ 
    background: #ffffff url(../PathToLeftBackground.png) top right; 
} 
td.right 
{ 
    background: #fffff url(../PathToRightBackground.png) top left; 
}

你也可以使用精靈形象，你使用1張圖片並將其放置在兩個背景上。

我意識到這可能不是最理想的解決方案，但它至少可以解決您的問題並使您的項目得以移動。我有時候會使用這樣簡單的解決方案來取得進展，然後重新研究這個問題，以便稍後提高效率。

希望這會有所幫助！

來源

2009-12-24 14:10:56

啊，我想這將是傳統上爲表格創建背景圖片的方式。這是很長的，因爲我不得不認真塑造一張帶有切片背景的桌子，以及我從未想到過的所有事物。我可以通過定位帶有x/y值的背景來緩解Webkit瀏覽器中的顯示問題，但將來這將成爲我將採用的路線，並且只是使用JavaScript動態地應用適當的背景樣式以保持標記清潔和簡單。我會標記爲好的建議和功能解決方案的答案。多謝兄弟！ – 2009-12-26 19:16:18

默認情況下，TR和TD具有顯示屬性table-cell和table-row。我們需要他們忘記它，感覺像簡單的塊元素：

tr {display: block;} 
td {display: inline-block; background: transparent;}

此代碼解決了我爲我呈現的問題。

來源

2010-11-02 13:11:25

感謝完美的解決方案，增加了webkit @media CSS hack。 '@media screen and（-webkit-min-device-pixel-ratio：0）{ tr {display：block;} \t td {display：inline-block; width：195px}' – Jamie 2011-03-15 15:20:37

你是上帝！！不是，但你的解決方案幫助了我。謝謝。 – Steve 2011-12-21 17:21:21

感謝你的解決方案在我們的CSS上，它節省了我很多時間。 – 2012-05-01 14:10:02

這有點晚了，但是，你可以使用「background-attachment：fixed」來解決這個問題。

<table> 
    <tr class="bg"> 
    <td></td> 
    <td></td> 
    </tr> 
</table>

和CSS

tr.bg { 
    background-image : url(../PathToLeftBackground.png) repeat-y 50px 0px; 
    background-attachment: fixed; 
}

和它的作品！

來源

2012-07-05 08:18:57 YellowMart

曾用此滾動？這很有趣 – HerrSerker 2014-07-08 14:55:37

感謝您的想法。我花了1周尋找好的解決方案漸變背景tr表。謝謝。 – Peter 2014-07-30 19:23:51

這節省了我的生命。我愛你。 – thouliha 2015-08-14 14:18:15

CSS/Webkit：表格行的背景圖片

回答

相關問題