CSS 跨浏览器问题，div 在 IE9 中无法填充容器，在 Firefox 中溢出

Question

我正在处理一个表格，该表格的单元格需要不透明度较低的背景，并且顶部的文本不受背景影响。单元格中的内容是动态的。

http://jsfiddle.net/6zszm/3/

在 IE9 中(尚未在其他 IE 版本中测试过)背景在 span 内容处被裁剪。在 Firefox 中，背景变得疯狂并溢出到右下角。在 chrome 中，这就像一个魅力。

一些没有完全涵盖的类似问题: How to make <div> fill <td> height有人建议 td 的高度为 1px - 这对我不起作用，没有任何改变。我也宁愿不使用 JS 来解决这个问题。

另一个有点相关的问题:CSS absolute positioning bug with IE9奇怪的是在 IE9 中，这 在兼容模式下工作，但并非没有。

Answer 1

这看起来确实是不可能的 - 除非您专门定义每个单元格的宽度和高度，否则会破坏使用表格的目的。

可能的解决方案...

RGBA

假设你要使用背景颜色，你总是可以使用 background-color: rgba(200,200,200,0.5)如果失败，则回退到纯色。所有顶级浏览器都支持 RGBA，但它不适用于 IE8 及以下版本...

透明PNG

显而易见的简单方法是回退到使用透明 PNG，但这取决于您使用的颜色是预定义的并且相当严格。

使用-moz元素

让 FireFox 正常工作的另一个疯狂解决方案(如果您使用的是背景图像而不是颜色)是使用 background: moz-element()能力。在这里，您可以在页面上创建您可能需要的每个不同不透明度的隐藏元素，并通过 id 将它们作为背景引用。例如:

<div id="image1" style="background: url(image1.jpg); opacity: 0.5;"></div>

然后在您希望背景出现的元素上引用它:

<td style="background: -moz-element(#image1);"></td>

不过，我并不保证这种方法，它相当不优雅并且特定于浏览器。老实说，我很惊讶地发现这个问题确实无法解决(尤其是在 FF 中)使用普通的旧绝对和相对技巧。

不要使用表

到目前为止，浏览器支持更多的解决方案是放弃使用表格并使用良好的旧 div 和 float 重新创建表格结构。此解决方案的唯一问题是您必须再次定义大多数宽度和高度，并且您将无法实现垂直单元格对齐，除非您回退到更具实验性的东西，例如 FlexBox。 .