我的标记如下。 #template 元素的 background 属性设置为 rgba，具有一定的透明度。在 IE9 中，透明度似乎不起作用。如果我从 #template 样式中删除 display: table-cell，则透明度有效，但单元格不再是 100% 高。这仅在 IE 中。它适用于 Chrome。没有尝试使用 FF。
我正在寻求帮助，以了解发生这种情况的原因以及解决方法。
我知道如果我删除 display: table-... 样式，它会起作用，但我的布局需要这些样式。除了display: table-cell 用于#template，我原来没有，但发现没有它，IE9 不会使它100% 高。我需要它 100% 高。
<!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>
最佳答案
尝试以这种方式拉伸(stretch)#template:
#template {
...
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
关于css - 表格单元格 div 的透明度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15951038/