当前位置：文江博客话题详情

在窗口调整大小或在选项卡之间切换之前，IE7 不会渲染部分页面

发布于 2024-08-02 19:53:25 字数 5196 浏览 6 评论 0原文

我的 IE7 有问题。

我有一个固定的布局，用于将标题和侧面板固定在页面上，只留下“主要内容”区域开关可以愉快地滚动其内容。

Twitpic 上的布局 http://twitpic.com/show/thumb/e32q7.png

这种布局对于 IE6 和 IE8 来说工作得非常好，但有时一个页面可能会开始“隐藏”应该在“主要内容”区域中显示的内容。

页面加载完毕，一切顺利。 IE7 会在一瞬间渲染主要内容，然后立即将其隐藏在视图中......某处......似乎只有当有足够的内容迫使“主要内容”区域隐藏时才会遇到此问题。滚动。

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

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

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

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

请记住，站点中的多个页面使用的布局与母版页中设置的布局完全相同。（在本例中）只有一个页面遇到此问题。

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

更新：相关问题目前还没有答案。

最新更新：添加示例母版页和 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>

原文

I have a problem with IE7.

I have a fixed layout for keeping the header and a sidepanel fixed on a page leaving only the "main content" area switch can happily scroll it's content.

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

This layout works perfectly fine for IE6 and IE8, but sometimes one page may start "hiding" the content that should be showing in the "main content" area.

The page finishes loading just fine. For a split second IE7 will render the main content just fine and then it will immediately hide it from view.. somewhere.. It would also seem that it only experiences this problem when there is enough content to force the "main content" area to scroll.

By resizing the window or switching to another open tab and back again will cause IE7 to show the page as it was intended.

Note the same problem does occur with IE8 in compatibility mode, but the page is rendered correctly in IE8 mode.

If need be I can attach the basic CSS styling I use, but I first want to see if this is a known issue with IE7.

Does IE7 have issues with positioned layout and overflow scrolling that is sometimes likes to forgot to finish rendering the page correctly until some window redraw event forces to finish rendering?

Please remember, this exact same layout is used across multiple pages in the site as it is set up in a master page. It is just (in this case) one page that is experiencing this problem.

Other pages with the exact same layout do render correctly. Even if the main content is full enough to also scroll.

UPDATE: A related question which doesn't have an answer at this point.

LATE UPDATE: Adding example masterpage and css

Please note this same layout is the same for all the pages in the application. My problem with IE7 only occurs on one such page. All other pages have happily render correctly in IE7. Just one page, using the exact same layout, has issues where it sometimes hides the content in the "work-space" div.

The master page

<%@ 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>

The 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;
}

The 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风筝有风，海豚有海 2024-08-09 19:53:25

一种理论：

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

尝试添加：

position: relative;
min-width: 0;

到正在消失的内容。

One theory:

Your CSS is declared after the main content area (which causes what's called a "flash of unstyled content"), and in your CSS there's an IE7 bug (could be the peekaboo bug) that causes the content to become hidden.

Try adding: