2009-08-16 6 views
5

J'ai un problème avec IE7.IE7 ne restitue pas la partie de la page jusqu'à ce que la fenêtre redimensionne ou permute entre les onglets

J'ai une disposition fixe pour garder l'en-tête et un panneau latéral fixe sur une page laissant seulement le commutateur de secteur de «contenu principal» peut heureusement faire défiler son contenu.

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

Cette disposition fonctionne parfaitement bien pour IE6 et IE8, mais parfois une page peut commencer à « cacher » le contenu qui doit être affiché dans la zone « contenu principal ».

La page se termine très bien. Pendant une fraction de seconde IE7 rendra le contenu principal très bien, puis il le cachera immédiatement de la vue .. quelque part .. Il semblerait aussi qu'il éprouve ce problème seulement quand il y a assez de contenu pour forcer la zone "contenu principal" à faire défiler. En redimensionnant la fenêtre ou en basculant vers un autre onglet ouvert et inversement, IE7 affichera la page comme prévu.

Notez que le même problème se produit avec IE8 en mode de compatibilité, mais la page est affichée correctement en mode IE8.

Si nécessaire, je peux joindre le style CSS de base que j'utilise, mais je veux d'abord voir s'il s'agit d'un problème connu avec IE7. Est-ce que IE7 a des problèmes avec la mise en page positionnée et le défilement de débordement qui aime parfois à oublier de terminer le rendu de la page correctement jusqu'à ce qu'une fenêtre redessine l'événement pour terminer le rendu?

Veuillez noter que cette même mise en page est utilisée sur plusieurs pages du site tel qu'il est configuré dans une page maquette. C'est juste (dans ce cas) une page qui rencontre ce problème.

D'autres pages présentant exactement la même disposition s'affichent correctement. Même si le contenu principal est assez complet pour faire défiler également.

MISE À JOUR: A related question qui n'a pas de réponse à ce stade.

MISE A JOUR TARD: Ajout exemple masterpage et css

S'il vous plaît noter que cette même disposition est la même pour toutes les pages de l'application. Mon problème avec IE7 se produit uniquement sur une telle page. Toutes les autres pages ont heureusement rendu correctement dans IE7. Juste une page, en utilisant la même mise en page, a des problèmes où parfois cache le contenu de la div "work-space".

La page principale

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

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

par défaut.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

Il fonctionne dans ma machine ... (en utilisant la vue comp IE8) Peut-être que le problème est les données? –

+0

Pourquoi les données devraient-elles être importantes? J'ai deux écrans construits de la même manière. Un seul semble avoir des problèmes avec IE7. Certes, les données sont différentes, mais je ne vois toujours pas pourquoi cela affecte les choses. IE7 rendra la page si vous redimensionnez la fenêtre ou passez juste d'un onglet à l'autre (et ne rafraîchissez pas la page du tout). C'est comme si IE7 abandonne le rendu de la page lors de son premier chargement, et seul un événement fenêtre lui fait penser "oops, je n'ai pas fini de rendre cette page, je devrais la rendre correctement maintenant". Le plus frustrant. – BlackMael

+0

Je veux dire: peut-être que les données ont un long html, ou un personnage amusant. Pourquoi n'essayez-vous pas exactement la même page, mais sans aucun enregistrement dans le tableau? En outre, une capture d'écran de ce que ressemble IE7 dans votre machine nous permettra de mieux comprendre le problème. –

Répondre

11

Une théorie:

Votre CSS est déclaré après la zone de contenu principal (ce qui provoque ce qu'on appelle un « FOUC »), et dans votre CSS il y a un bug IE7 (peut-être peekaboo bug) qui provoque le contenu à masquer.

Essayez d'ajouter:

 
position: relative; 
min-width: 0; 

Pour le contenu qui est de disparaître.

+0

Sauf les autres pages avec la même déclaration de feuilles de style n'a pas le même problème. En fait la page avec le problème rendra parfois très bien sans avoir besoin de redimensionner ou de changer d'onglet. Bien qu'une fois qu'une page rencontre des problèmes, elle continue à avoir des problèmes. Il n'y a pas de règle stricte que je peux déterminer qui peut toujours déterminer si la page sera entièrement rendu correctement. – BlackMael

+0

Existe-t-il un exemple (CSS et HTML) quelque part? – etoleb

+0

Je vais ajouter le CSS et html demain car je n'ai pas le code avec moi ce soir – BlackMael

Questions connexes