重複線性背景顯示錯誤

我最近在Chrome中發現一個奇怪的顯示問題，而試圖將重複梯度上表行：重複線性背景顯示錯誤

<table id="one"> 
    <tr><td>123</td><td>asd</td><td>brgfbb</td><td>sdf</td><td>bgfb</td></tr> 
</table> 

#one tr{ 
    background-image: repeating-linear-gradient(135deg, 
        #bada55, #bada55 5px, 
        transparent 5px, transparent 10px); 
}

在td放置這樣的梯度元素當然不起作用。但是，將漸變放在tr上時，奇怪的漸變會中斷，就好像它放在td上一樣。這些中斷正是表格單元格接觸的地方。當將漸變放置在桌面上時，條紋的大小不規則。

鉻：

Chrome linear gradient bug

在Firefox的一切看起來不錯：

Firefox gradient

附： IE10與tr上的漸變具有相同的問題，直接在表格元素上看起來一切正常。

您是否知道此問題的任何解決方法？

來源

2013-07-16 Christoph

我真的很想知道的原因downvote ...;） – Christoph

你能設置一個快速的小提琴嗎？ – SpaceBeers

@SpaceBeers我有這樣的感覺，你沒有看到我的問題的第一句話之外......爲什麼;）我編輯了我的答案，使小提琴更加突出。 – Christoph

這可以通過將css應用於您正在使用的ID來解決 - #one或#two。 jsfiddle這裏展示 - 你可以看到，我改變了它從

#one tr{ 
    background-image: repeating-linear-gradient(135deg, #bada55, #bada55 5px, transparent 5px, transparent 10px); 
    padding:0;margin:0; 
}

到

#one { 
    background-image: repeating-linear-gradient(135deg, #bada55, #bada55 5px, transparent 5px, transparent 10px); 
    padding:0;margin:0; 
}

而且沒有多個被破壞的背景圖像:)

來源

2014-04-15 03:40:26 Ceili

感謝您關注此事。然而，你的解決方案正如我在我的問題中提到的那樣：'當將漸變放置在桌面上時，而不是[']'您可以在我的參考表＃2中看到。這也顯着地改變了選擇器的語義，這不能總是完成。而且，在這種情況下，條紋仍然具有不規則的大小。最後但並非最不重要的一點是，你的小提琴完全符合我的... – Christoph

重複線性背景顯示錯誤

回答

相關問題