我们可以在多元化表格中解决Chrome中的表格行背景图像问题吗？

Question

它经常被问到 - 但我还没有看到一个好的答案(我看了).如果将CSS中的背景图像设置为表格行 - 图像将在每个单元格中重复出现.如果你设置position: relative(为行)并设置background-image: none(对于单元格)它解决了IE上的问题,但不解决铬问题!我不能使用背景定位,因为有很多电话,它们的大小各不相同.(而且图片不对称 - 从一边消失.任何人？

css代码示例:

tr { height: 30px; position:relative;}
tr.green { background: url('green_30.png') no-repeat left top; }
tr.orange { background: url('oranger_30.png') no-repeat left top;}
tr.red { background: url('red_30.png') no-repeat left top; }
td { background-image: none; }

HTML是基本的 - 一个多单元格表.

目标是让不同颜色淡入每一行,但它可以是任何非图案图像.

Answer 1

好吧,我花了很多时间阅读这篇文章,并且找不到所有浏览器的简单修复,但是当我看到你使用固定高度行时,我已经开发了自己的解决方法:http://jsfiddle.net/DR8bM/

基本上,不是将背景图像放在行上,而是将它放在每行第一个单元格中的绝对定位div上(并展开它以填充整行).这有点hacky,但可能是实现你想要的唯一可靠的方法.