css - 重复线性背景显示不正确

Question

我最近在尝试在表格行上放置重复渐变时在 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渐变会被打乱，就好像它放在tds 上一样。休息点正是表格单元格接触的地方。当将渐变放在桌子上时，条纹的大小不规则。

铬合金：

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

PS 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;
}

并且没有更多被破坏的背景图像:)