使用IFrame忽略z-index。隐藏下拉菜单。

Question

仅在Internet Explorer中（在Chrome和Firefox中正常工作），它始终将iFrame中显示的PDF放在页面上任何其他对象的顶部。我上面有一个水平菜单，下拉菜单隐藏在后面。

我尝试在IE9模式下强制网站，在所有项目和父项目上使用z-index，将wmode =添加到透明或不透明。

只有在iframe中加载pdf时才会发生这种情况。如果加载了网页，则菜单会显示在顶部。

CSS：

iframe
{
  position: relative;
  z-index: 0;
}

#Standings_Container
{
    float:left;
    text-align: center;
    width: 100%;
    z-index: 0;
    position: relative;
}

#nav .Menu_Child {
    display:none;
    position:absolute;
    left:0;
    top:26px;
    height:auto;
    float:left;
    width:174px;
    overflow:hidden;
    z-index: 10000;
}

HTML：

<div class="Menu_Child">
  <ul>
     <li><a href="#">Applications</a></li>
     <hr class="Menu_Child_HR" />
     <li><a href="#">Schedules</a></li>
     <hr class="Menu_Child_HR" />
     <li><a href="#">Standings</a></li>
     <hr class="Menu_Child_HR" />
     <li><a href="#">Rules</a></li>
     <hr class="Menu_Child_HR" />
     <li><a href="#">Sponsors</a></li>
     <hr class="Menu_Child_HR" />
     <li><a href="#">Gym/Field Directions</a></li>
     <hr class="Menu_Child_HR" />
     <li><a href="#">Register Online</a></li>
  </ul>
</div>

<div id="Standings_Container">
  <iframe style="margin-top:8px;" scrolling="yes" width="850" height="600" src="[PDF URL]"></iframe>
</div>

Answer 1

我遇到过这么多次，不幸的是，它似乎是IE（特别是Adobe Windows PDF插件）呈现PDF的方式的限制。它基本上是在页面上的每个其他元素上生成的。

尽管Flash嵌入对象可以使用wmode =“transparent”来克服这个问题，但这与PDF插件不同。我将尝试使用无窗口或窗口参数，但我确信我已经尝试过这个。

不幸的是，对于我自己和其他人来说，将PDF降低和/或扩大导航下方的差距是不可取的。

对我来说，但我可能错了，Adobe需要重新审视IE处理PDF或Microsoft使用不同渲染引擎的方式。

的Fabio

Answer 2

经过一周的尝试不同的解决方案和修复，我找不到任何适合我的具体情况的东西。相反，我只是使我的子菜单上的垂直间距更短，并将iff中的pdf进一步向下推到页面上，以便下拉菜单永远不会重叠。