在窗口调整大小或在选项卡之间切换之前，IE7 不会呈现页面的一部分答案

【问题标题】：IE7 doesn't render part of page until the window resizes or switch between tabs在窗口调整大小或在选项卡之间切换之前，IE7 不会呈现页面的一部分
【发布时间】：2009-08-16 04:15:43
【问题描述】：

我的 IE7 有问题。

我有一个固定的布局来保持页眉和侧面板固定在页面上，只留下“主要内容”区域开关可以愉快地滚动它的内容。

layout on Twitpic http://twitpic.com/show/thumb/e32q7.png

这种布局非常适合 IE6 和 IE8，但有时一个页面可能会开始“隐藏”应该在“主要内容”区域显示的内容。

页面完成加载就好了。在一瞬间，IE7 会很好地呈现主要内容，然后它会立即将其隐藏在视图中.. 某处.. 它似乎只有在有足够的内容来强制“主要内容”区域时才会遇到这个问题滚动。

通过调整窗口大小或切换到另一个打开的选项卡并再次返回将导致 IE7 按预期显示页面。

注意，IE8 在兼容模式下也会出现同样的问题，但页面在 IE8 模式下可以正确呈现。

如果需要，我可以附加我使用的基本 CSS 样式，但我首先想看看这是否是 IE7 的一个已知问题。

IE7 是否存在定位布局和溢出滚动问题，有时会忘记正确完成页面渲染，直到某些窗口重绘事件强制完成渲染？

请记住，在网站的多个页面中使用与在母版页中设置的完全相同的布局。只是（在这种情况下）一个页面遇到了这个问题。

具有完全相同布局的其他页面可以正确呈现。即使主要内容也足够滚动。

更新：A related question 目前没有答案。

后期更新：添加示例母版页和 css

请注意，应用程序中的所有页面都采用相同的布局。我的 IE7 问题只出现在这样的一个页面上。所有其他页面都可以在 IE7 中正确呈现。只有一页使用完全相同的布局，存在有时将内容隐藏在“工作空间”div 中的问题。

母版页

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="shared_templates_MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <link rel="Stylesheet" type="text/css" href="~/common/yui/2.7.0/build/reset-fonts/reset-fonts.css" runat="server" />
  <link rel="Stylesheet" type="text/css" href="~/shared/css/layout.css" runat="server" />
  <asp:ContentPlaceHolder ID="head" runat="server" />
</head>
<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
  <div id="app-header">
  </div>
  <div id="side-panel">
  </div>
  <div id="work-space">
    <asp:ContentPlaceHolder ID="WorkSpaceContentPlaceHolder" runat="server" />
  </div>
  <div id="status-bar">
    <asp:ContentPlaceHolder ID="StatusBarContentPlaceHolder" runat="server" />
  </div>
  </form>
</body>
</html>

layout.css

html {
    overflow: hidden;
}

body {
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: white;
}

body, table, td, th, select, textarea, input {
  font-family: Tahoma, Arial, Sans-Serif;
  font-size: 9pt;
}

p {
  padding-left: 1em;
  margin-bottom: 1em;
}

#app-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: #dcdcdc;
  border-bottom: solid 4px #000;
}

#side-panel {
  position: absolute;
  top: 84px;
  left: 0px;
  bottom: 0px;
  overflow: auto;
  padding: 0;
  margin: 0;
  width: 227px;
  background-color: #AABCCA;
  border-right: solid 1px black;
  background-repeat: repeat-x;
  padding-top: 5px;
}

#work-space {
    position: absolute;
    top: 84px;
    left: 232px;
    right: 0px;
    padding: 0;
    margin: 0;
    bottom: 22px;
    overflow: auto;
    background-color: White;
}

#status-bar {
  position: absolute;
  height: 20px;
  left: 228px;
  right: 0px;
  padding: 0;
  margin: 0;
  bottom: 0px;
  border-top: solid 1px #c0c0c0;
  background-color: #f0f0f0;
}

Default.aspx

<%@ Page Title="Test" Language="VB" MasterPageFile="~/shared/templates/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="WorkspaceContent" ContentPlaceHolderID="WorkSpaceContentPlaceHolder" Runat="Server">
  Workspace
  <asp:ListView ID="DemoListView" runat="server"
                DataSourceID="DemoObjectDataSource"
                ItemPlaceholderID="DemoPlaceHolder">
    <LayoutTemplate>
      <table style="border: 1px solid #a0a0a0; width: 600px">
        <colgroup>
          <col width="80" />
          <col />
          <col width="80" />
          <col width="120" />
        </colgroup>
        <tbody>
          <asp:PlaceHolder ID="DemoPlaceHolder" runat="server" />
        </tbody>
      </table>
    </LayoutTemplate>
    <ItemTemplate>
      <tr>
        <th><%#Eval("ID")%></th>
        <td><%#Eval("Name")%></td>
        <td><%#Eval("Size")%></td>
        <td><%#Eval("CreatedOn", "{0:yyyy-MM-dd HH:mm:ss}")%></td>
      </tr>
    </ItemTemplate>
  </asp:ListView>

  <asp:ObjectDataSource ID="DemoObjectDataSource" runat="server" OldValuesParameterFormatString="original_{0}" SelectMethod="GetData" TypeName="DemoLogic">
    <SelectParameters>
      <asp:Parameter Name="path" Type="String" />
    </SelectParameters>
  </asp:ObjectDataSource>
</asp:Content>

<asp:Content ID="StatusContent" ContentPlaceHolderID="StatusBarContentPlaceHolder" Runat="Server">
  Ready OK.
</asp:Content>

【问题讨论】：

它在我的机器上工作...（使用 IE8 comp 视图）也许问题出在数据上？
为什么数据很重要？我有两个以相同方式构建的屏幕。似乎只有一个与 IE7 有问题。尽管数据不同，但我仍然不明白它为什么会影响事情。如果您调整窗口大小或只是在选项卡之间切换（并且根本不刷新页面），IE7 会呈现页面。就像 IE7 在第一次加载页面时放弃渲染页面，只有一些窗口事件导致它认为“哎呀，我还没有完成渲染这个页面。我现在应该正确渲染它”。最令人沮丧。
我的意思是：也许数据有一些长的html，或者一些有趣的字符。为什么不尝试完全相同的页面，但表中没有任何记录？此外，您的机器上的 IE7 屏幕截图将有助于我们更好地理解问题。

标签： asp.net internet-explorer-7 rendering quirks-mode

【解决方案1】：

一个理论：

您的 CSS 在主要内容区域之后声明（这会导致所谓的“无样式内容闪现”），并且在您的 CSS 中存在导致内容隐藏的 IE7 错误（可能是 peekaboo bug）。

尝试添加：

位置：相对；最小宽度：0；

到正在消失的内容。

【讨论】：

除了样式表声明完全相同的其他页面没有同样的问题。事实上，有问题的页面偶尔会呈现得很好，而无需调整大小或切换选项卡。尽管一旦页面出现问题，它通常会一直出现问题。没有什么硬性规定可以让我确定可以始终如一地确定页面是否会完全正确呈现。
某处是否有示例（CSS 和 HTML）？
我明天会添加 css 和 html，因为我今天晚上没有代码