Internet Explorer 8标准模式导致空白页损坏

问题描述 投票：0回答：1

我遇到了一个奇怪的问题，我正在努力找出导致页面中断的原因。 我有一个仍在开发中的内部网站（因此没有指向页面的链接），该网站在IE 7标准模式下的Firefox和Internet Explorer 8中运行良好。 但是，当我将其强制为IE 8 Standards模式时，该页面将仅在浏览器选项卡中显示标题文本，否则将显示完全空白的页面。 似乎太破了，空白页甚至没有上下文菜单。

该页面通常如下所示： 

<!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>

您可能会注意到样式表的.less扩展名。 这是一个ASP.NET MVC应用程序，我正在使用DotLess 。 我在web.config中将HttpHandler连接起来。 当然，页面上还有一些其他信息，但是（理论上）它不应该引起此问题。 我已经通过W3C验证程序运行了CSS和HTML，并且两者都恢复为完全有效。 我正在尝试删除/重新添加元素的艰巨任务，直到它显示出来，但是任何可能导致此问题的见识都会有所帮助。

编辑 ：似乎与DotLess样式表相关。 根据W3C CSS验证器，生成的CSS有效。

编辑2 ：进一步挖掘，并利用IE的开发人员工具来控制样式，看来IE正在读取一条语句两次，即使该语句仅在输出中出现一次。 这是Less文件的输出： 

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%;
}

请注意#newsfeed div .newFeatures标识符。 我不知道是什么原因造成的，因为它仅在输出流中出现一次。 这也是它的图像 ： 开发人员工具中的CSS标识符重复

编辑3 ：看起来，即使它复制了那个特定的选择器，但如果我将font-size更改为61%类的整数，而不是当前的60.95% （默认为尽可能与现有桌面应用程序尽可能地匹配），工作正常。 我什至将字体大小（仍为60.95% ）移动到一个更通用的选择器（只是.newFeature几行），它仍然导致页面中断。 仍然不确定为什么。 我添加了完整的HTML，以查看发生了什么。

xhtml internet-explorer-8 standards
1个回答
1
投票

请记住，在没有看到任何代码或任何内容的情况下我们无法知道，所以这基本上是猜测。 如果您可以得到显示问题的样本，那将是很大的帮助。

您是否尝试过使用开发人员工具查看和操纵页面的结构？ 如果您没有明显的原因遇到怪异的渲染问题，那么这就是第一个开始的地方。

编辑：好的，这确实很困难。 这就是我能够想到的。

对于初学者，即使我将所有CSS复制到文件中，我也看不到多重定义问题-因此我无法真正告诉您发生了什么。

其次，问题似乎并非是60.95％-如果使用60％或60.XX％，它的作用相同。 61％有效，60.99不有效，59.99％有效，60％不有效。

但是，如果我删除overflow-y：滚动，它确实会渲染页面。 实际上，如果我删除.newFeatures或#newsfeed div .newFeatures上的任何定义，它都可以工作。 我也可以将它们更改为其他东西，并且可以工作-最大高度除外。 只需将#newsfeed div .newFeatures的两个边距之一更改为#newsfeed div .newFeatures ，即可再次渲染页面。 我建议将其作为临时解决方法-或将字体大小更改为61％，因为两者之间的差异很小。

真的很难说出这是怎么回事，但是看起来IE中存在一个错误，在这种特定情况下，导致一些内部计算异常错误-并且浏览器无法从中恢复。

我认为这绝对是IE团队现在想知道的事情，因此他们有机会针对IE9进行修复。 这是一个非常孤立的案例，可能不是他们的测试当前涵盖的内容。 我不确定与他们联系的最佳方式是什么-这里有一些MSFT，包括Eric Law ，他们可能比打开支持案例知道更好的选择。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.