0

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

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

我知道如果我删除display: table-...样式，它会起作用，但是我的布局需要这些样式。除了 for display: table-cell，#template我最初没有，但发现没有它，IE9 不会让它 100% 高。我需要它是 100% 高。

http://jsfiddle.net/d6nUN/

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body {
        height: 100%;
      }
      #container {
        display: table;
        height: 100%;
        width: 100%;
      }
      #container #content {
        background-color: #ff6622;
        display: table-row;
        height: 100%;
      }
      #template {
        background: rgba(255, 255, 255, 0.3);
        display: table-cell;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="content">
        <div id="template">text</div>
      </div>
    </div>
  </body>
</html>
4

2 回答 2

0

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

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

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

于 2013-04-11T14:24:00.497 回答
0

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

rgba 背景与 IE 过滤器替代：IE9 呈现两者！

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

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

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

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

于 2013-04-11T14:29:07.103 回答