2009-08-16 4 views
5

IE7に問題があります。IE7は、ウィンドウのサイズが変更されたり、タブが切り替わるまでページの一部をレンダリングしません。

ヘッダーとサイドパネルをページに固定したまま固定レイアウトにすると、「メインコンテンツ」エリアスイッチだけを残して、内容をスクロールすることができます。

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

このレイアウトは、IE6とIE8のために完璧にうまく動作しますが、時には1ページには、「メインコンテンツ」エリアに表示されるべき内容を「隠し」起動することがあります。

ページの読み込みが正常に終了しました。分割された秒のために、IE7はメインのコンテンツをうまくレンダリングし、次にそれをビューからどこかに隠します。.. "メインコンテンツ"領域を強制的に使用するのに十分なコンテンツがある場合にのみ、スクロール。

ウィンドウのサイズを変更するか、別の開いているタブに切り替えて元に戻すと、意図したとおりにIE7がページを表示します。

IE8の互換モードでも同じ問題が発生しますが、ページはIE8モードで正しく表示されます。

私は基本的なCSSスタイルを使用する必要がある場合は、まずこれがIE7の既知の問題であるかどうかを確認したいと思っています。

IE7には配置済みのレイアウトとオーバーフロースクロールに関する問題がありますが、一部のウィンドウ再描画イベントがレンダリングを終了するまでページを正しくレンダリングするのを忘れてしまうことがありますか?

マスターページに設定されているため、サイト内の複数のページに同じレイアウトが使用されています。この問題が発生しているのは(この場合は)1ページだけです。

全く同じレイアウトの他のページが正しくレンダリングされます。たとえメインコンテンツがスクロールするのに十分であっても。

更新A related questionこの時点では回答はありません。

LATE UPDATE:追加の例のマスターページとCSS

この同じレイアウトは、アプリケーション内のすべてのページに同じであることに注意してください。 IE7の私の問題は、そのようなページでのみ発生します。他のすべてのページはIE7でうまく正しく表示されます。正確に同じレイアウトを使用している1ページだけでは、の場合はが「作業スペース」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; 
} 

デフォルト。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

私のマシンでは動作しています...(IE8 comp viewを使用して)おそらく問題はデータですか? –

+0

データはなぜ重要なのですか?同じ方法で2つの画面を作りました。 1つだけがIE7に問題があるようです。データは異なるとは認められますが、なぜそれが影響を与えるのかは分かりません。ウィンドウのサイズを変更したり、タブを切り替えるだけでIE7はページをレンダリングします(ページをまったくリフレッシュしません)。これは、IE7が最初に読み込まれたときにページをレンダリングすることをあきらめるようなもので、一部のウィンドウイベントでは「おっと、このページのレンダリングが完了していません。最もイライラする。 – BlackMael

+0

私は、データに長いhtmlや面白い文字が含まれている可能性があります。あなたはまったく同じページを試してみませんが、テーブルに記録はありません。 また、あなたのマシンでIE7がどのように見えるかのスクリーンショットは、問題をより良く理解するのに素敵です。 –

答えて

11

一説:

あなたのCSSは、およびあなたのCSSでIE7のバグがあります(「unstyledコンテンツのフラッシュ」と呼ばれるものが発生)メインのコンテンツ領域の後に宣言されている

(かもしれませんpeekaboo bug)が含まれているため、コンテンツが非表示になります。

 
position: relative; 
min-width: 0; 

を消えていたコンテンツへ:

を追加してみてください。

+0

スタイルシートの宣言がまったく同じ他のページには、同じ問題はありません。実際には、問題のあるページは、タブのサイズを変更したり切り替えたりすることなく、うまく表示されることがあります。ページに問題が発生しても、一般的に問題は発生します。ページが完全に正しくレンダリングされるかどうかを一貫して判断できるかどうかを判断するための厳密なルールはありません。 – BlackMael

+0

例(CSSとHTML)はどこかにありますか? – etoleb

+0

明日はCSSとhtmlを追加します。現在、私はこの夕方にコードを持っていません。 – BlackMael

関連する問題