重复线性背景显示不正确

Question

我最近在Chrome中发现了一个奇怪的显示问题，同时尝试在表格行上放置重复渐变：

see the Demo

<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上一样。中断正好是表格单元格所触及的位置。将渐变放在桌子上时，条纹的大小不规则。

铬：

在Firefox中，一切看起来都不错：

P.S。 IE10与tr上的渐变有同样的问题，直接在表格元素上看起来一切都很好。

您是否知道此问题的解决方法？

Answer 1

这可以通过将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;
}

不再破坏背景图片：）