不透明度,即使用绝对定位的div不工作

时间:2009-10-14 23:31:27

标签: html css internet-explorer transparency

我一直在撞墙几个小时,试图解决这个问题。我试图将一个div放在另一个div之上,目的是将一个div放在另一个上面。 div将有一个图像和其他一些html。我无法在ie8中工作。我尽可能地简化了我的HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<style>

  * { margin: 0; padding: 0; }

  .carousel-container {
    position: relative;
  }  

  .carousel-overlay {
    position: absolute;
  }

  #carousel-container-a {
    opacity: 1; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  }

  #carousel-container-b {
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);    
  }

  h1 { font-size: 100px; }


</style>

</head>
<body>


<div id="carousel-container-a" class="carousel-container">
  <div class="carousel-overlay" style="left: 10px; top: 10px;">
    <h1 style="color: black;">Showcase</h1>
  </div>
  <!-- other elements removed for simplicity -->
</div>
<div  id="carousel-container-b" class="carousel-container">
  <div class="carousel-overlay" style="left: 20px; top: 20px;">
    <h1 style="color: red;">Welcome</h1>
  </div>
  <!-- other elements removed for simplicity -->
</div>


</body>
</html>

为什么不透明度不起作用?我怎样才能使它发挥作用?

2 个答案:

答案 0 :(得分:1)

试一试:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;

这包含了IE7和IE8的两种语句。这应该正确处理不透明度。虽然这与您已经使用的类似,但我重新安排了这些陈述。根据Microsoft的说法,您必须先列出新的扩展格式,然后再列出较旧的设置。除了CSS不透明度设置之外。

答案 1 :(得分:0)

尝试将haslayout应用于元素。

#carousel-container a { zoom:1; }

宽度/高度/内联块以及其他一些也可以使用。