Resultados Internet Explorer 8 modo de padrões Em página em branco quebrado
https://stackoverflow.com/questions/2434155
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu estou correndo em um problema estranho que eu estou lutando para descobrir o que está causando a página para quebrar. Eu tenho um site interno que ainda está em fase de desenvolvimento (assim, não link para a página) que funciona muito bem no Firefox e Internet Explorer 8 no IE 7 modo padrão. Mas quando eu forçá-lo para o modo IE 8 Normas página só irá exibir o texto do título na aba do navegador e uma página de outra forma completamente em branco. Parece tão quebrado que a página em branco não tem sequer um menu de contexto.
A página geralmente se parece com isso:
<!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>
Você pode notar a extensão .less para a folha de estilo. Esta é uma aplicação ASP.NET MVC e eu estou fazendo uso de dotless . Eu tenho o HttpHandler viciado para ele no web.config. Claro que há algumas informações adicionais sobre a página, mas (em teoria) não deve estar causando este problema. Já corri o CSS eo HTML através dos validadores do W3C e ambos têm voltar como completamente válido. Eu estou tentando a árdua tarefa de remover / elementos acrescentando re-até que ele exibe, mas qualquer visão sobre o que poderia causar isso ajudaria.
Editar : ele parece ser algo relacionado com o estilo dotless. O CSS resultante é válido de acordo com o validador do W3C CSS.
EDIT 2 : Escavando mais, e fazendo uso de ferramentas de desenvolvimento do IE para controlar os estilos, parece que o IE está lendo uma única instrução duas vezes, mesmo que só ocorre uma vez na saída. Aqui está a saída do arquivo Menos:
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 o identificador #newsfeed div .newFeatures perto do fim. Eu não sei o que está causando isso, pois só está aparecendo uma vez no fluxo de saída. Aqui está um imagem dele também:
EDIT 3 : Parece que mesmo que ele duplica que selector particular, se eu mudar o font-size a um número inteiro como 61% vez do 60.95% atual (que específicas para corresponder defaultly o aplicativo de desktop existente tão perto quanto possível) ele funciona muito bem. Eu até mudou o tamanho da fonte (ainda como 60.95%) para um seletor mais geral (apenas o .newFeature um algumas linhas para cima) e ainda faz com que a página para quebrar. Ainda não tenho certeza por que isso acontece. Eu adicionei o HTML completo para ver o que está acontecendo.
Solução
Tenha em mente, não temos nenhuma maneira de saber sem ver qualquer código ou nada, então este é basicamente adivinhação. Se você pode obter uma amostra para cima que mostra o problema, que seria uma grande ajuda.
Você já tentou usar as ferramentas de desenvolvedor para ver e manipular a estrutura da página? Esse é o primeiro lugar para começar quando você começa problemas de processamento de estranhos sem motivo aparente.
EDIT: Ok, isso é realmente uma pergunta difícil. Aqui está o que eu tenho sido capaz de chegar a.
Para começar, eu não vejo a questão defintion múltiplos aqui, embora eu copiei tudo isso CSS em um arquivo -. Então eu realmente não posso dizer o que está acontecendo lá
Em segundo lugar, parece que o problema não é especificamente a 60,95% - ele faz o mesmo, se você usar 60%, ou 60.XX%. 61% trabalhos, 60,99 não faz, 59,99% de obras, 60% não.
No entanto, ele não processar a página se eu remover overflow-y: rolagem. Na verdade, ele funciona se eu remover qualquer das definições sobre .newFeatures ou #newsfeed div .newFeatures. Eu também pode alterá-los para outra coisa, e ele funciona - exceto para max-altura. Mudando apenas uma das duas margens em #newsfeed div .newFeatures para 0.999em torna a página tornar novamente. Proponho fazer isso como uma solução temporária -. Ou movendo-se para 61% font-size, uma vez que há uma diferença muito pequena
É realmente difícil dizer o que está acontecendo aqui, mas parece que há um bug no IE que faz com que alguns cálculos internos para ir horrivelmente errado neste cenário específico -. E de alguma forma o navegador não recuperar-se
Eu acho que este é definitivamente algo que a equipe IE gostaria de saber sobre o agora, então há uma chance de que eles podem corrigi-lo para IE9. Este é um caso muito isolado, e provavelmente não algo coberto atualmente por seus testes. Eu não tenho certeza que a melhor maneira de entrar em contato com eles são - existem algumas MSFTs aqui, incluindo Eric Lei , que pode saber de uma opção melhor do que abrir um caso de suporte.
