我在使用表格重复线性渐变时遇到了麻烦.基本上,我不能让它看起来很漂亮,特别是在Chrome上.即使我将所述规则应用于tr元素,它看起来像td元素继承它而不是连续条纹,我得到’锯齿’的(=条纹不会继续通过单元格边框).
.striped {
background: repeating-linear-gradient(
45deg,#FFFFFF,#FFFFFF 10px,#DDDDDD 10px,#DDDDDD 20px
)}
这是Codepen说明问题：
http://codepen.io/merryprankster/pen/bpeCc
使用Chrome,它看起来非常糟糕.使用Firefox,几乎是好但不完全(有时条纹宽度不同 – 偏离一个像素 – 跨越单元边界).
编辑：澄清一下,我需要定位一个特定的行,而不是整个表.所以是的,关于样式化tr的观点实际上是相关的.
解决方法
This is a confirmed bug in Chrome.鉴于它是在2010年首次报道(当Gecko实际上有相同的bug)并且目前标记为WONTFIX,我不会屏住呼吸进行真正的修复.你可以打开一个新的bug,它现在可能是“可行的”.
作为一种解决方法：将条纹放在桌面上,以免混淆渲染机制,然后取代对“要条纹化”的行进行样式化,取消其他行的样式,如下所示：
table.striped {
background: repeating-linear-gradient(
45deg,#DDDDDD 20px
);
}
tr:not(.striped) {
background:white; /* or any color that would normally be behind the table */
}
这样它仍然可以像你想要突出显示指示的行一样.如果出于某种原因,在没有样式的行后面有一个非透明的背景,你可能因为这个bug而运气不好.
Updated codepen.在IE,FF和Chrome中完全相同,没有’hickups’.
