Internet Explorer 8标准模式导致打破空白页

时间：2010-03-12 16:31:52

标签： xhtml internet-explorer-8 standards

我遇到了一个奇怪的问题，我正在努力弄清楚导致页面破坏的原因。我有一个内部网站仍处于开发阶段（因此没有链接到该页面），在IE 7标准模式下的Firefox和Internet Explorer 8中运行良好。但是当我强制它进入IE 8标准模式时，页面将只在浏览器选项卡中显示标题文本，否则显示完全空白的页面。看起来很破碎，空白页甚至没有上下文菜单。

页面通常如下所示：

<!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标识符。我不知道是什么导致了它，因为它只在输出流中出现一次。这里也是image： CSS identifier duplication in Developer Tools

编辑3 ：即使重复该特定选择器，如果我将font-size更改为61%之类的整数而不是当前{{1} （具体到默认情况下尽可能匹配现有的桌面应用程序）它工作正常。我甚至将字体大小（仍为60.95%）移动到更通用的选择器（只有几行60.95%），它仍会导致页面中断。仍然不确定为什么会这样。我添加了完整的HTML以查看发生了什么。

1 个答案:

答案 0 :(得分：1)

请记住，我们没有任何代码或任何东西可以知道，所以这基本上是猜测。如果您可以获得显示问题的样本，那将是一个很大的帮助。

您是否尝试使用开发人员工具查看和操作页面结构？当你因为没有明显原因而出现奇怪的渲染问题时，这是第一个开始的地方。

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

首先，我没有看到这里的多重定义问题，即使我将所有CSS复制到文件中 - 所以我无法真正告诉你那里发生了什么。

其次，看起来问题并不是特别是60.95％ - 如果使用60％或60.XX％，它也会一样。 61％有效，60.99无效，59.99％有效，60％没有。

但是，如果我删除overflow-y：scroll，它会呈现页面。事实上，如果我删除了.newFeatures或#newsfeed div .newFeatures上的任何定义，它就有效。我也可以将它们更改为其他东西，它可以工作 - 除了最大高度。只需将#newsfeed div .newFeatures上的两个边距中的一个更改为0.999em，即可再次渲染页面。我建议将其作为临时解决方案 - 或者转换为61％的字体大小，因为差别很小。

很难分辨出这里发生了什么，但看起来IE中存在一个错误导致某些内部计算在这种特定情况下出现严重错误 - 并且某种程度上浏览器无法从中恢复。

我认为这肯定是IE团队现在想知道的事情，所以他们有可能为IE9修复它。这是一个相当孤立的案例，可能不是他们的测试目前涵盖的东西。我不确定与他们联系的最佳方式是什么 - 这里有一些MSFT，包括Eric Law，他们可能知道比打开支持案例更好的选择。

相关问题
最新问题