2

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

铬合金:

Chrome 线性渐变错误

在 Firefox 中,一切看起来都不错:

火狐渐变

PS IE10 上的渐变也有同样的问题tr,直接在表格元素上一切看起来都很好。

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

4

1 回答 1

0

这可以通过将 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-15T03:40:26.857 回答