CSS 跨浏览器问题，在 IE9 中 div 不会填充容器，在 Firefox 中溢出答案

【问题标题】：CSS Cross-browser issue, div won't fill container in IE9, overflows in FirefoxCSS 跨浏览器问题，在 IE9 中 div 不会填充容器，在 Firefox 中溢出
【发布时间】：2012-06-30 23:43:22
【问题描述】：

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

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 中，这工作在兼容模式下，但并非没有。

【问题讨论】：

您需要什么样的浏览器兼容性？ IE8？ IE7？
理论上，以上所有和 IE6，但我还没有机会测试它们。
我可能会想出一个解决方案，这意味着 IE6 用户的每个单元格都会出现间歇性闪烁的粉红色背景......这会有帮助吗？ ;) .. 基本上，如果您必须支持那么远，您只能使用 PNG 透明图像（当然还有 PNGFix hack）。

标签： css cross-browser position css-tables

【解决方案1】：

您可以尝试使用 CSS 框架，例如 LESS 或 Blueprint。大多数框架都有背景代码，即使通常需要进行调整，您的样式在所有浏览器中看起来都一样。

【讨论】：

你有例子吗？我知道 LESS 有 CSS 变量，而 Blueprint 可以帮助您跳过基本任务的调色板，但我也没有看到这种支持。
@Chris 我能想到的最突出的是圆角。通常，如果您真的希望它在所有浏览器中工作，那是相当多的代码行数，因为其中一些要求您使用自己的图像，而另一些则不需要。圆形边缘的 LESS 函数确定您正在使用哪个浏览器并设置正确的样式命令。我已经阅读了一些 LESS 代码，并且我阅读的许多函数都从 switch 语句开始，以确定正在使用的浏览器以及在每种情况下应用于样式的某些条件。

【解决方案2】：

这确实看起来不可能 - 除非你专门定义每个单元格的宽度和高度，这样就违背了使用表格的目的。

可能的解决方案...

RGBA

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

透明 PNG

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

使用-moz-element

另一个mad 让 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 这样更具实验性的东西。

【讨论】：

似乎 PNG 将成为解决这一问题的方法，但我非常感谢所有选项。信息量大，谢谢！
@Alex heh，不用担心......我想我有点吃惊，这不是直接解决。将绝对定位元素放置在相对定位的 TD 中时，FireFox 的行为方式确实非常奇怪，完全出乎意料......