Primefaces 3.1 Overlay 面板在 IE8 上功能异常答案

【问题标题】：Primefaces 3.1 Overlay panel misfunctioning on IE8Primefaces 3.1 Overlay 面板在 IE8 上功能异常
【发布时间】：2012-02-13 09:46:47
【问题描述】：

这个问题之前发布在 Primefaces 论坛上，我没有收到任何答案。

我正在尝试 Primefaces 3.1，因为我需要覆盖面板功能。不幸的是，在我的 Internet Explorer 8 (ie8) 中，从未显示以下非常简单的覆盖面板，而它在 Firefox 5.x 上运行良好。 html 代码中似乎与 Ie8 问题直接相关的一些点如下： - 页面不需要垂直滚动条（如果页面有一个，则显示覆盖面板） - 覆盖面板的高度是固定的。

<h:body>
<div style="height: 300px"></div>
<h:form>
<p:commandLink id="showAllUserList" value="Utenti online" />
<p:overlayPanel for="showAllUserList" my="right bottom" at="right top" dynamic="true"
style="width: 300px; height: 500px; border: 1px solid red; overflow-y: scroll" >
He who rules the skies rules the ground
<br/>
Monti kicks ass
</p:overlayPanel>
</h:form>
</h:body>

如果我不能很快找到解决方法，我将不得不自己实现一些东西。

谢谢菲利波

【问题讨论】：

标签： primefaces overlay

【解决方案1】：

在关闭 h:body 标记之前放置以下 Javascript 代码。

<script type="text/javascript">
 if ( $.browser.msie) {
   if(parseInt($.browser.version, 10) === 8){
      var overlayPan = $("div.ui-overlaypanel");
      $(overlayPan).css('position','fixed');
    }
  }
</script>

【讨论】：

【解决方案2】：

您可以尝试将覆盖面板的appendToBody 设置为true。这在某些情况下会有所帮助，但老实说，我认为您的页面足够简单，不会有什么不同。

【讨论】：

目前我在使用 IE8 时遇到同样的问题 - 当应出现叠加层时（鼠标悬停效果），我的页面会出现滚动条。如果我更改浏览器窗口的大小，则会显示叠加层...

【解决方案3】：

检查overflow:hidden（也是.ui-overlaypanel 的子元素）的样式，给他们overflow:visible - 结合固定大小（正如你已经拥有的）我能够解决问题。

【讨论】：