滚动条不会在IE7中滚动div内容(IE8兼容性)

时间:2011-10-07 18:06:10

标签: asp.net internet-explorer-7

我在IE7中遇到了一个奇怪的问题(我的意思是IE8兼容模式),div中的滚动条出现在其内容的后面。它位于一个jQueryUI模式对话框中,占据了大部分屏幕并且里面有很多东西。 div包含ASP:Repeater,它以网格样式布局呈现自定义行。

div的完整标记是:

<div style='max-height:250px; overflow-y:scroll;
border:1px solid #AAAAAA; border-top-width:0; margin-left:auto;
margin-right:auto;'>
  <asp:Repeater ID="myRepeater" runat="server">
     <ItemTemplate>
        <asp:Panel ID="pnlItem" runat="server" style='padding-top:5px;
           padding-bottom:5px; position:relative;'>
           .....
        </asp:Panel>
     </ItemTemplate>
  </asp:Repeater>
</div>

以下是问题的屏幕截图。覆盖垂直滚动条的灰色是通过pnlItem上的类设置的交替背景颜色。下面的文字(“H.S. Gym”)是转发器底部pnlItem的一部分。此外,当我移动其中一个滚动条时,内容不会移动,直到我移动模态对话框。

Example

我不知道该怎么做。它似乎是一个真正随机的渲染错误,将有一个同样随机的解决方案。谷歌没有任何帮助。这是怎么回事?

编辑10/7/2011:我通过在div上设置显式宽度来解决重叠滚动条问题。现在垂直滚动条在IE7中正确显示,但是当我使用它滚动时,内容的滚动位置不会更新,直到我通过其标题栏抓取模态并在浏览器屏幕中移动它。我已经更新了这个问题的标题以反映这一点。

1 个答案:

答案 0 :(得分:1)

事实证明,问题是position:relative在每个Repeater项目根目录的pnlItem控件上。在IE7中,这会导致滚动条不起作用。我有这个设置,所以我可以在每个pnlItem内部获得一些布局工作,但我最终做了不同的事情,因此能够删除该样式属性并使其工作。