iframe在firefox中覆盖任何具有透明度的div

Question

我为自己的网站创建了一个自定义对话框。因此，它需要覆盖任何内容以显示一些消息。但是，我有一个iframe，第三部分内容用于网络聊天。

如果我为我的div设置了不透明的background-color，那么工作正常。它覆盖了iframe内容。但是，如果我执行类似：background: rgba(0,0,0,0.9)甚至opacity: 0.9的操作，则iframe内容会覆盖我的div。这只发生在firefox中，chrome工作得很好。

我做了这样的测试：

.dialog-box-content {
  position: fixed;
  top: 0;
  left: 0;
  background: black;
  width: 100%;
  height: 50%;
  z-index: 5000;
}
.dialog-box-2 {
  position: relative;
  top: 400px;
  display: block;
  width: 100%;
  height: 100px;
  color: White;
  background-color: rgba(255, 0, 0, 0.5);
  border-radius: 5px;
  box-shadow: inset 0 0 5px #fff, 0 0 10px #000;
  z-index: 5000;
}
.chat {
  position: relative;
  width: 800px;
  height: 500px;
  border: 2px solid #000;
  margin: auto;
  display: block;
}

<div class="dialog-box-content">
  <div class="dialog-box-2">some-content</div>
</div>

<iframe class="chat" src="http://vircio.net/sala/mtgobycockatrice&estilo=darkorange&autoconectar=1&ocultarEntradas=1&altura=500?wmode=transparent" frameborder="0" style="width: 800px; height: 500px;">
</iframe>

我得到的是：

这只是在firefox中讨价还价。