Question

我的标记在下面。 background元素的#template属性设置为rgba，具有一定的透明度。在IE9中，透明度似乎不起作用。如果我从display: table-cell样式中移除#template，则透明度会起作用，但单元格不再是100％高。这只是在IE中。它适用于Chrome。没试过FF。

我正在寻找帮助，弄清楚为什么会发生这种情况以及如何解决它。

我知道如果删除display: table-...样式，它会起作用，但我的布局需要这些样式。除了我display: table-cell的{{1}}，我原本没有，但发现没有它，IE9并没有让它达到100％的高度。我需要它100％高。

http://jsfiddle.net/d6nUN/

#template

Answer 1

尝试以这种方式拉伸#template：

#template {
    ...
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

http://jsfiddle.net/pfUe7/2/

Answer 2

我做了一些研究并看到了以下内容：

rgba background with IE filter alternative: IE9 renders both!

在#template规则集中尝试以下声明：

  filter: progid:DXImageTransform.Microsoft.alpha(30);

您可能必须使此CSS规则特定于IE9，但至少您可以使用table-cell。

参考：http://msdn.microsoft.com/en-us/library/ms532910%28v=vs.85%29.aspx

表格单元格的透明度

2 个答案: