IE7 не отображает часть страницы, пока окно не изменит размер или не переключится между вкладками
У меня проблема с IE7.
У меня есть фиксированный макет для сохранения заголовка и боковой панели на странице, оставляя только переключатель области "основного контента", чтобы легко прокручивать его содержимое.
Этот макет прекрасно работает для IE6 и IE8, но иногда одна страница может начать "скрывать" контент, который должен отображаться в области "основного контента".
Страница заканчивается загрузка просто отлично. В течение доли секунды IE7 будет хорошо отображать основной контент, а затем сразу же будет скрывать его из поля зрения... где-то... Может показаться, что он испытывает эту проблему только тогда, когда достаточно контента, чтобы заставить область "основного контента" прокрутки.
Изменение размера окна или переключение на другую открытую вкладку и обратно приведет к тому, что IE7 покажет страницу так, как это было задумано.
Обратите внимание, что та же проблема возникает с IE8 в режиме совместимости, но страница отображается правильно в режиме IE8.
При необходимости я могу прикрепить базовый стиль CSS, который я использую, но сначала я хочу посмотреть, является ли это известной проблемой в IE7.
Есть ли у IE7 проблемы с позиционированной разметкой и прокруткой переполнения, из-за которой иногда хочется забыть завершить рендеринг страницы правильно, пока какое-либо событие перерисовки окна не заставит завершить рендеринг?
Пожалуйста, помните, что такой же макет используется на нескольких страницах сайта, как он настроен на главной странице. Это просто (в данном случае) одна страница, которая испытывает эту проблему.
Другие страницы с точно такой же версткой отображаются правильно. Даже если основное содержание достаточно полно, чтобы прокрутить.
ОБНОВЛЕНИЕ: связанный вопрос, который не имеет ответа на данный момент.
ПОСЛЕДНЕЕ ОБНОВЛЕНИЕ: добавление примера masterpage и css
Обратите внимание, что этот же макет одинаков для всех страниц приложения. Моя проблема с IE7 возникает только на одной такой странице. Все остальные страницы успешно отображаются правильно в IE7. Только одна страница, использующая точно такой же макет, имеет проблемы, когда она иногда скрывает содержимое в элементе "рабочее пространство".
Мастер страница
<%@ 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>
1 ответ
Одна теория:
Ваш CSS объявляется после основной области содержимого (которая вызывает так называемую "вспышку нестандартного содержимого"), а в вашем CSS есть ошибка IE7 (может быть ошибка peekaboo), которая приводит к тому, что содержимое становится скрытым.
Попробуйте добавить:
положение: относительное; минимальная ширина: 0;
К содержанию, которое исчезает.