我正在制作一张桌子，其中的单元格需要不透明度较低的背景，而顶部的文字不受背景影响。单元格中的内容是动态的。
在IE9中（未在其他IE版本中测试过），背景会在span内容中被剪裁。在Firefox中，后台运行狂野并溢出到右下角。在chrome中，这就像一个魅力。
一些类似的问题没有完全覆盖它： How to make <div> fill <td> height 有人建议td高度为1px - 这对我不起作用，没有任何改变。我也不愿用JS来解决这个问题。
另一个有些相关的问题：CSS absolute positioning bug with IE9
奇怪的是在IE9中，这个在兼容模式下工作，但并非没有。
答案 0 :(得分：1)
这确实看似不可能 - 除非你专门定义每个单元格的宽度和高度，否则哪种方法会破坏使用表格的对象。
Possbile解决方案......
假设您要使用背景颜色，如果失败，您可以始终使用background-color: rgba(200,200,200,0.5)并返回纯色。支持RGBA在所有顶级浏览器中，它不适用于IE8及更低版本...
显而易见的一个就是回退使用透明的PNG，但是这依赖于您使用的颜色是预定义的而且相当僵硬。
让FireFox工作的另一个 mad 解决方案（如果你使用背景图片而不是颜色）将使用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。
答案 1 :(得分：0)
您可以尝试使用CSS框架，例如LESS或Blueprint。大多数框架都有背景代码，使您的样式在所有浏览器中看起来都一样，即使通常需要进行调整。