重复线性背景显示不正确

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 上时，渐变会奇怪地被打乱，就好像它放在tds 上一样。休息点正是表格单元格接触的地方。而是将渐变放在桌子上时，条纹的大小不规则。

铬：

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

附： IE10在tr上的渐变也有同样的问题，直接在table元素上一切都很好。

您知道此问题的任何解决方法吗？

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

而且没有更多被破坏的背景图片:)