我正在处理一张表格，该表格的单元格需要降低不透明度的背景，并且顶部的文本不受背景影响。单元格中的内容是动态的。
在 IE9 中（未在其他 IE 版本中测试过）背景在 span 内容处被裁剪。在 Firefox 中，背景运行狂野并溢出到右下角。在 chrome 中，这就像一个魅力。
一些类似的问题并没有完全涵盖它： 如何使 <div> 填充 <td> 高度 有人建议 td 的高度为 1px - 这对我不起作用，没有任何改变。我也宁愿不使用 JS 来解决这个问题。
另一个相关的问题： IE9 中的CSS 绝对定位错误
奇怪的是在 IE9 中，它在兼容模式下工作，但并非没有。
这看起来确实是不可能的——除非你专门定义了每个单元格的宽度和高度，这样就违背了使用表格的目的。
可能的解决方案...
假设您要使用背景颜色，background-color: rgba(200,200,200,0.5)如果失败，您始终可以使用回退到纯色。所有顶级浏览器都支持 RGBA，但它不适用于 IE8 及以下版本……
显而易见的简单方法是回退到使用透明 PNG，但这取决于您使用的颜色是预定义的并且相当严格。
另一个让 FireFox 工作的疯狂解决方案（如果您使用背景图像而不是颜色）将使用该background: moz-element()功能。在这里，您可以在页面上创建您可能需要的每种不同不透明度的隐藏元素，并通过 id 将它们作为背景引用。例如：
<div id="image1" style="background: url(image1.jpg); opacity: 0.5;"></div>
然后在您希望背景出现的元素上引用它：
<td style="background: -moz-element(#image1);"></td>
但是，我不保证这种方法，它相当不雅且特定于浏览器。Tbh 我很惊讶地发现这个问题确实无法使用普通的绝对和相对技巧来解决（尤其是在 FF 中）。
到目前为止，更多浏览器支持的解决方案是放弃使用表并使用良好的旧 div 和浮点数重新创建表结构。此解决方案的唯一问题是您必须再次定义大多数宽度和高度，并且您将无法实现垂直单元格对齐，除非您回退到像FlexBox这样更具实验性的东西。
您可以尝试使用 CSS 框架，例如 LESS 或 Blueprint。大多数框架都有背景代码，可以让你的样式在所有浏览器中看起来都一样，即使通常需要调整。