2009-08-16 13 views
5

Tengo un problema con IE7.IE7 no representa parte de la página hasta que la ventana cambie de tamaño o cambie entre las pestañas

Tengo un diseño fijo para mantener el encabezado y un panel lateral fijo en una página, y solo el botón de "contenido principal" puede desplazar felizmente su contenido.

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

Este diseño funciona perfectamente bien para IE6 e IE8, pero a veces una página puede comenzar a "ocultar" el contenido que se debe mostrar en el área de "contenido principal".

La página termina de cargar bien. Por una fracción de segundo IE7 renderizará el contenido principal muy bien y luego lo ocultará inmediatamente de la vista ... en alguna parte ... También parece que solo experimenta este problema cuando hay suficiente contenido para forzar el área de "contenido principal" a voluta.

Al cambiar el tamaño de la ventana o cambiar a otra pestaña abierta y viceversa hará que IE7 muestre la página como estaba previsto.

Tenga en cuenta que el mismo problema ocurre con IE8 en modo compatibilidad, pero la página se representa correctamente en modo IE8.

Si es necesario, puedo adjuntar el estilo básico de CSS que uso, pero primero quiero ver si este es un problema conocido con IE7.

¿IE7 tiene problemas con el diseño posicionado y el desplazamiento de desbordamiento que a veces le gusta olvidar terminar de representar la página correctamente hasta que algunas ventanas vuelvan a dibujar las fuerzas del evento para finalizar el procesamiento?

Recuerde que este mismo diseño se utiliza en varias páginas del sitio, ya que está configurado en una página maestra. Es justo (en este caso) una página que está experimentando este problema.

Otras páginas con el mismo diseño exactamente renderizan correctamente. Incluso si el contenido principal está lo suficientemente lleno como para desplazarse también.

ACTUALIZACIÓN: A related question que no tiene una respuesta en este momento.

ACTUALIZACIÓN TARDE: Adición ejemplo masterpage y CSS

Tenga en cuenta este mismo diseño es el mismo para todas las páginas de la aplicación. Mi problema con IE7 solo ocurre en una de esas páginas. Todas las otras páginas se han renderizado correctamente en IE7. Solo una página, con el mismo diseño, tiene problemas donde a veces oculta el contenido en el div "espacio de trabajo".

La página maestra

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

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

el valor predeterminado.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> 
+0

Está trabajando en mi máquina ... (usando la vista comp IE8) ¿Tal vez el problema son los datos? –

+0

¿Por qué deberían importar los datos? Tengo dos pantallas construidas de la misma manera. Solo uno parece tener problemas con IE7. De acuerdo, la información es diferente, pero aún no puedo ver por qué afecta las cosas. IE7 renderiza la página si cambia el tamaño de la ventana o simplemente cambia entre pestañas (y no actualiza la página en absoluto). Es como si IE7 deja de renderizar la página cuando se carga por primera vez, y solo un evento de ventana hace que piense "oops, no he terminado de renderizar esta página. Ahora debería renderizarla correctamente". Más frustrante – BlackMael

+0

Quiero decir: tal vez los datos tienen algún html largo, o algún personaje divertido. ¿Por qué no intentas exactamente la misma página, pero sin ningún registro en la tabla? Además, una captura de pantalla de cómo se ve IE7 en su máquina será maravilloso para comprender mejor el problema. –

Respuesta

11

Una teoría:

Su CSS se declara después de que el área de contenido principal (que provoca lo que se llama un "destello de contenido sin estilo"), y en su CSS hay un error de Internet Explorer 7 (podría ser el peekaboo bug) que hace que el contenido se oculte.

Trate de añadir:

 
position: relative; 
min-width: 0; 

Para el contenido que está desapareciendo.

+0

Excepto otras páginas con la misma declaración de hojas de estilo no tiene el mismo problema. De hecho, la página con el problema ocasionalmente se procesará sin necesidad de cambiar el tamaño o cambiar las pestañas. Aunque una vez que una página tiene problemas, generalmente sigue teniendo problemas. No hay una regla rígida que pueda determinar que pueda determinar en forma consistente si la página se procesará por completo. – BlackMael

+0

¿Hay algún ejemplo (CSS y HTML) en alguna parte? – etoleb

+0

Añadiré css y html mañana ya que actualmente no tengo el código conmigo esta tarde – BlackMael

Cuestiones relacionadas