Internet Explorer 8 Resultados modo estándar en quebrado página en blanco
https://stackoverflow.com/questions/2434155
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy corriendo en un problema raro que estoy luchando para averiguar qué está causando la página de romper. Tengo un sitio web interno que aún está en fase de desarrollo (por lo tanto hay un vínculo a la página) que funciona muy bien en Firefox e Internet Explorer 8 en el IE 7 modo estándar. Pero cuando me fuerzo a modo de IE 8 Normas de la página sólo mostrará el texto del título de la pestaña del navegador y una página de otro modo completamente en blanco. Parece tan roto que la página en blanco no tiene ni siquiera un menú contextual.
La página general es el siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="IE=8" http-equiv="X-UA-Compatible" />
<title>Page Title</title>
<link rel="shortcut icon" href="/Images/favicon.ico" type="image/x-icon" />
<link href="/Style/main.less" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<span id="logindisplay">[ <a href="/Account/LogOn">Log On</a> ]</span>
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<div id="title">
<h1>APP TITLE</h1>
</div>
<div class="logo">
<img alt="Application" src="/Images/info.png" title="Application" />
</div>
<div>
<div id="company">Offered by: <span>Company Name</span>
</div>
<div id="version">Version: 0.0.0.0</div>
</div>
</div>
<div class="col2">
<div id="menucontainer">
<ul id="menu">
<li>
<a href="/Module1" class="ciApp">
<img alt="module" height="84px" src="/Images/Module1.png" title="module" />
<span>Module</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col3">
<div id="newsfeed">
<span class="welcomemessage">Welcome to <b>Application</b>
</span>
<div>
<span class="newsLabel">New Features</span>
<div class="newFeatures">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas condimentum laoreet. Curabitur urna elit, sagittis vel condimentum sit amet, ullamcorper suscipit diam. Suspendisse non ligula metus, nec ultricies libero. Vestibulum molestie ornare urna, eu posuere ipsum lacinia nec. Nulla facilisi. Curabitur elit ligula, laoreet nec vehicula at, ornare sed metus. Suspendisse gravida mattis vulputate. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer rutrum erat sed lacus eleifend et dapibus nisi mollis. Nulla elementum lacus quis mauris pulvinar in accumsan odio malesuada. Aliquam ultrices, mauris sit amet pharetra euismod, nisi nunc rhoncus est, eu commodo nunc sem vitae risus. Ut egestas ligula eu elit blandit consequat. Donec nunc justo, congue non mollis at, porta non massa.</p>
<p>Pellentesque consequat fermentum sapien at dictum. In pretium varius tellus, vitae blandit sapien cursus quis. Suspendisse potenti. Sed sollicitudin tempus elit et sodales. Vestibulum fringilla tempus elit, vitae convallis massa laoreet vel. Nulla facilisi. Duis dolor leo, lacinia ut ultrices eu, mollis in purus. Donec sagittis, est id tincidunt pulvinar, magna metus pellentesque nunc, eget tincidunt metus tellus sollicitudin tortor. Donec quis convallis nibh. In luctus, ipsum non sodales ornare, mi lectus molestie orci, id dignissim tellus augue at neque.</p>
<p>Phasellus ut molestie leo. Donec egestas odio ut felis lacinia ut interdum diam interdum. Fusce at posuere tortor. Vestibulum cursus elit quis purus porta vitae adipiscing nulla laoreet. Nam pretium orci a sem volutpat nec rhoncus magna viverra. Aenean non orci sapien. Nunc hendrerit sollicitudin lorem viverra porta. Pellentesque ac porttitor elit. Mauris risus sem, dapibus eu convallis vel, posuere in nibh. Phasellus sit amet tortor neque, aliquam volutpat massa. Sed quam libero, porttitor a lacinia in, pellentesque in libero. Suspendisse adipiscing laoreet lacus, eget fringilla felis tristique id. Maecenas lacinia, ante a vulputate gravida, felis libero hendrerit dolor, non tristique ante massa vitae leo. Aenean laoreet porta urna ullamcorper facilisis.</p>
<p>Nam a ligula a quam interdum ultricies. Suspendisse tempor pellentesque augue at sollicitudin. Sed vulputate, erat mollis fringilla rhoncus, nulla quam ullamcorper lacus, vel molestie metus ipsum quis eros. Fusce eget turpis tortor, viverra volutpat leo. Vestibulum in augue in augue fringilla volutpat sed eu purus. Ut varius lacus eget orci consequat eget tincidunt mi placerat. Donec suscipit suscipit enim, eget iaculis diam pellentesque in. Cras ac ante et lorem porttitor consectetur. Maecenas semper posuere magna. Aliquam erat volutpat. Sed at ante feugiat lectus hendrerit semper et ut elit. Aenean scelerisque fermentum justo, at blandit risus interdum eget. Donec a nulla pellentesque erat volutpat gravida. Nunc mattis est ac dolor dapibus viverra. Nulla facilisi.</p>
<p>Donec diam neque, lobortis quis aliquam nec, fermentum ac quam. Cras porta nisi sed massa pellentesque vitae luctus erat porttitor. Sed porta elit ac ligula semper eget volutpat purus adipiscing. Mauris aliquet convallis consectetur. Aliquam vel neque sit amet odio dapibus feugiat. Morbi vehicula porttitor cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ut augue at tellus iaculis fringilla ut at enim. Ut sed lorem nunc. Aliquam ac accumsan eros. Fusce faucibus, lacus in convallis commodo, turpis nisi gravida ligula, sit amet semper odio ante sit amet lorem. Integer mollis, nibh vel malesuada imperdiet, purus justo ullamcorper ipsum, sed volutpat velit dui eget felis. Quisque sapien ante, dapibus quis malesuada ultrices, tincidunt id nibh. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Usted puede notar la extensión .less de la hoja de estilo. Se trata de una aplicación ASP.NET MVC y lo estoy haciendo uso de sin punto . Tengo la HttpHandler conectado para ello en el web.config. Por supuesto que hay algo de información adicional en la página, pero (en teoría) no debe ser la causa de este problema. Me he encontrado el CSS y el HTML a través de los validadores del W3C y ambos han vuelto tan completamente válido. Estoy intentando la ardua tarea de eliminar / re-adición de elementos hasta que se muestra, pero ninguna información sobre lo que podría causar esto ayudaría.
Editar : parece ser algo relacionado con la hoja de estilo sin punto. El CSS resultante es válida de acuerdo con el validador CSS W3C.
EDIT 2 : Excavar más, y haciendo uso de herramientas para desarrolladores de IE para controlar los estilos, parece que IE es la lectura de un único estado dos veces a pesar de que sólo ocurre una vez en la salida. Aquí está la salida de la Menos archivo:
a, abbr, acronym, address, applet, b, big, caption, center, cite, code, dd, dfn, div, dl, dt, em, fieldset, font, form, html, i, iframe, img, kbd, label, legend, li, object, pre, s, samp, small, span, strike, strong, sub, sup, tbody, td, tfoot, th, thead, tr, tt, u, var {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
blockquote, q {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
quotes: none;
}
body {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
line-height: 1;
width: 100%;
background: #efebde;
min-width: 600px;
}
del {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: line-through;
}
h1 {
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 2em;
margin: .8em 0 .2em 0;
padding: 0;
}
h2 {
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1.8em;
margin: .8em 0 .2em 0;
padding: 0;
}
h3 {
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1.6em;
margin: .8em 0 .2em 0;
padding: 0;
}
h4 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1.4em;
}
h5 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1.2em;
}
h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
font-size: 1em;
}
ins {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
}
ol, ul {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
list-style: none;
}
p {
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
margin: .4em 0 .8em 0;
padding: 0;
}
table {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
border-collapse: collapse;
border-spacing: 0;
}
blockquote:before, blockquote:after, q:before, q:after { content: none; }
:focus { outline: 0; }
.bold { font-weight: bold; }
.systemFont { font-family: Arial; }
.labelled { font-style: italic; }
.groovedBorder {
border-color: #adaa9c;
border-style: groove;
border-width: medium;
}
#header, #footer {
clear: both;
float: left;
width: 100%;
}
#header p, #header h1, #header h2 {
padding: .4em 15px 0 15px;
margin: 0;
}
#header ul {
clear: left;
float: left;
width: 100%;
list-style: none;
margin: 10px 0 0 0;
padding: 0;
}
#header ul li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#header ul li a {
background: #eeeeee;
display: block;
float: left;
left: 15px;
line-height: 1.3em;
margin: 0 0 0 1px;
padding: 3px 10px;
position: relative;
text-align: center;
text-decoration: none;
}
#header ul li a span { display: block; }
#header ul li a:hover { background: #336699; }
#header ul li a.active, #header ul li a.active:hover {
background: black;
font-weight: bold;
}
#header #logindisplay {
float: right;
padding-top: .5em;
padding-bottom: .5em;
padding-right: 1em;
padding-left: 1em;
}
#title h1 {
font-family: Arial;
font-style: italic;
font-size: 175%;
text-align: center;
margin-top: 1%;
}
.col1 {
font-family: Arial;
border-color: #adaa9c;
border-style: groove;
border-width: medium;
min-height: 350px;
float: left;
overflow: hidden;
position: relative;
padding-top: 0;
padding-bottom: 1em;
padding-left: 0;
padding-right: 0;
}
.col1 div.logo { text-align: center; }
.col3 {
font-family: Arial;
border-color: #adaa9c;
border-style: groove;
border-width: medium;
float: left;
overflow: hidden;
position: relative;
}
#layoutdims {
clear: both;
background: #eeeeee;
margin: 0;
padding: 6px 15px !important;
text-align: right;
}
#company {
padding-left: 10px;
padding-top: 10px;
margin: 0;
}
#company span {
display: block;
padding-left: 1em;
}
#version {
padding-right: 1em;
padding-top: 1em;
text-align: center;
}
#menu li {
padding: 6px;
border-color: #adaa9c;
border-style: groove;
border-width: medium;
min-width: 108px;
}
#menu li a.ciApp {
text-decoration: none;
font-size: 112.5%;
font-weight: bold;
font-family: Arial;
color: black;
}
#menu li a.ciApp span { vertical-align: top; }
.welcomemessage { font-size: 60.95%; }
.newFeatures {
overflow-y: scroll;
max-height: 300px;
}
#newsfeed div .newsLabel {
color: red;
font-size: 60.95%;
font-style: italic;
}
/**************************************************************************************
This statement appears twice in Developer Tools. Disabling one disables both. Disabling it also causes the page to render. Turning it on and the page disappears again
**************************************************************************************/
#newsfeed div .newFeatures {
margin-left: 1em;
margin-right: 1em;
font-size: 60.95%;
}
/**************************************************************************************
**************************************************************************************/
.colmask {
clear: both;
float: left;
position: relative;
overflow: hidden;
width: 100%;
}
.colright, .colmid, .colleft {
float: left;
position: relative;
width: 100%;
}
.col2 {
float: left;
overflow: hidden;
position: relative;
padding-top: 0;
padding-bottom: 1em;
padding-left: 0;
padding-right: 0;
}
.threecol .colmid { right: 33%; }
.threecol .colleft { right: 34%; }
.threecol .col1 {
width: 33%;
left: 100%;
}
.threecol .col2 {
width: 32%;
left: 34%;
}
.threecol .col3 {
width: 32%;
left: 68.5%;
}
Observe el identificador #newsfeed div .newFeatures cerca del final. No sé cuál es la causa de que, ya que sólo está apareciendo una vez en la secuencia de salida. He aquí un de ella también:
Datos 3 : Parece que a pesar de que duplica ese selector en particular, si cambio el font-size a un número entero como 61% en lugar de la 60.95% actual (es específica para que coincida con defaultly la aplicación de escritorio existente lo más cerca posible) que trabaja muy bien. Incluso me moví el tamaño de fuente (siendo tan 60.95%) a un selector más general (sólo el uno .newFeature unas líneas arriba) y que todavía hace que la página se rompa. Aún no sabe por qué. He añadido el código HTML completo para ver lo que está pasando.
Solución
Tenga en cuenta, no tenemos manera de saber sin ver ningún código ni nada, así que esto es básicamente conjeturas. Si se puede obtener una muestra de arriba que muestra el problema, eso sería una gran ayuda.
¿Ha intentado utilizar las herramientas de desarrollo para ver y manipular la estructura de la página? Ese es el primer lugar para comenzar cuando llegue a problemas de representación extraños sin razón aparente.
EDIT: Bueno, esto es realmente una pregunta difícil. Esto es lo que he sido capaz de llegar a.
Para empezar, no veo el problema múltiple Defintion aquí, a pesar de que he copiado todo eso en un archivo CSS -. Por lo que no puedo decir lo que está pasando allí
En segundo lugar, parece que el problema no es específicamente el 60,95% - que hace lo mismo si se utiliza el 60%, o 60.XX%. 61% funciona, 60,99 no, 59,99% de obras, el 60% no lo hace.
Sin embargo, no representar la página de desbordamiento si quito-Y: desplazamiento. De hecho, funciona si quito cualquiera de las definiciones en .newFeatures o #newsfeed div .newFeatures. También puedo cambiarlos a otra cosa, y funciona - a excepción de max-height. Simplemente cambiar uno de los dos márgenes de #newsfeed div .newFeatures a 0.999em hace que la página render de nuevo. Propongo hacer eso como una solución temporal -. O en movimiento a 61% de tamaño de fuente, ya que hay muy poca diferencia
Es muy difícil saber lo que está pasando aquí, pero parece que hay un error en el IE que hace que algunos cálculos internos a ir muy mal en este escenario particular -. Y de alguna manera el navegador no se recupera de ella
Creo que esto es definitivamente algo que el equipo de IE le gustaría saber acerca de ahora, por lo que hay una posibilidad de que puedan arreglarlo para IE9. Este es un caso muy aislado, y probablemente no es algo que actualmente cubierto por sus pruebas. No estoy seguro de cuál es la mejor manera de contactar con ellos son - hay algunas MSFTs de aquí, incluyendo Ley Eric , que puede saber de una opción mejor que abrir un caso de soporte.
