2009-08-16 8 views
5

Tôi gặp sự cố với IE7.IE7 không hiển thị một phần của trang cho đến khi cửa sổ đổi kích thước hoặc chuyển đổi giữa các tab

Tôi có bố cục cố định để giữ tiêu đề và sidepanel được cố định trên trang chỉ để chuyển đổi vùng "nội dung chính" có thể cuộn nội dung đó một cách vui vẻ.

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

bố trí này hoạt động hoàn toàn tốt đẹp cho IE6 và IE8, nhưng đôi khi một trang có thể bắt đầu "cất giấu" những nội dung cần được hiển thị trong khu vực "nội dung chính".

Trang kết thúc quá trình tải tốt. Đối với một thứ hai chia IE7 sẽ làm cho nội dung chính tốt và sau đó nó sẽ ngay lập tức ẩn nó từ xem .. một nơi nào đó .. Nó cũng sẽ có vẻ rằng nó chỉ trải nghiệm vấn đề này khi có đủ nội dung để buộc các "nội dung chính" khu vực cuộn.

Bằng cách đổi kích thước cửa sổ hoặc chuyển sang một tab đang mở khác và ngược lại sẽ khiến IE7 hiển thị trang như dự định.

Lưu ý vấn đề tương tự xảy ra với IE8 ở chế độ tương thích, nhưng trang được hiển thị chính xác ở chế độ IE8.

Nếu cần tôi có thể đính kèm kiểu CSS cơ bản tôi sử dụng, nhưng trước hết tôi muốn xem đây có phải là vấn đề đã biết với IE7 hay không.

IE7 có vấn đề với bố trí vị trí và cuộn quá mức đôi khi thích quên hoàn thành hiển thị trang chính xác cho đến khi một số cửa sổ vẽ lại lực lượng sự kiện để kết thúc hiển thị?

Hãy nhớ, bố cục chính xác này được sử dụng trên nhiều trang trong trang web khi được thiết lập trong trang chính. Nó chỉ là (trong trường hợp này) một trang đang gặp phải vấn đề này.

Các trang khác có cùng bố cục chính xác hiển thị chính xác. Ngay cả khi nội dung chính đủ đầy đủ để cuộn.

CẬP NHẬT: A related question không có câu trả lời vào thời điểm này.

MUỘN CẬP NHẬT: Thêm dụ masterpage và css

Xin lưu ý cùng bố trí này là như nhau cho tất cả các trang trong ứng dụng. Vấn đề của tôi với IE7 chỉ xảy ra trên một trang như vậy. Tất cả các trang khác đều vui vẻ hiển thị chính xác trong IE7. Chỉ một trang, sử dụng cùng một bố cục chính xác, có các vấn đề trong đó đôi khi ẩn nội dung trong div "không gian làm việc".

Trang chủ

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

Các 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> 
+0

Máy đang hoạt động trong máy của tôi ... (sử dụng chế độ xem IE8 comp) Có thể vấn đề là dữ liệu? –

+0

Tại sao dữ liệu lại quan trọng? Tôi có hai màn hình được xây dựng theo cùng một cách. Chỉ có một dường như có vấn đề với IE7. Cấp dữ liệu là khác nhau nhưng tôi vẫn không thể thấy lý do tại sao nó ảnh hưởng đến mọi thứ. IE7 không hiển thị trang nếu bạn thay đổi kích thước cửa sổ hoặc chỉ chuyển đổi giữa các tab (và không làm mới trang). Nó giống như IE7 từ bỏ việc hiển thị trang khi nó tải lần đầu tiên, và chỉ một số sự kiện cửa sổ làm cho nó suy nghĩ "oops, tôi đã không hoàn thành việc render trang này. Tôi nên render nó ngay bây giờ". Bực bội nhất. – BlackMael

+0

Ý tôi là: có thể dữ liệu có một số html dài hoặc một số ký tự vui nhộn. Tại sao bạn không thử cùng một trang, nhưng không có bất kỳ bản ghi nào trong bảng? Ngoài ra, ảnh chụp màn hình của IE7 trông như thế nào trong máy của bạn, chúng tôi sẽ rất tuyệt vời để hiểu vấn đề tốt hơn. –

Trả lời

11

Một giả thuyết:

CSS của bạn được công bố sau khi khu vực nội dung chính (gây những gì được gọi là "flash của nội dung unstyled"), và trong CSS của bạn có một lỗi IE7 (có thể là peekaboo bug) khiến nội dung bị ẩn.

Hãy thử thêm:

 
position: relative; 
min-width: 0; 

Để nội dung đó là biến mất.

+0

Ngoại trừ các trang khác có cùng khai báo kiểu định kiểu không có cùng vấn đề. Trên thực tế, trang có vấn đề sẽ thỉnh thoảng hiển thị tốt mà không cần phải thay đổi kích thước hoặc chuyển đổi tab. Mặc dù một khi một trang đang gặp sự cố, thông thường nó sẽ không gặp vấn đề gì. Không có quy tắc cứng và nhanh nào mà tôi có thể xác định có thể xác định một cách đồng bộ nếu trang đó sẽ hiển thị chính xác hoàn toàn. – BlackMael

+0

Có một ví dụ (CSS và HTML) ở đâu đó không? – etoleb

+0

Tôi sẽ thêm css và html vào ngày mai vì hiện tại tôi không có mã với tôi tối nay – BlackMael