随机渲染问题与IE 8

Question

我有一个遗留代码错误在jsp，我试图复制和修复。他们正在使用div，java 1.6的框架。 JBoss 4.3，jQuery 1.6.2和scriptlet（没有JSTL）。这是旧的和新的混合。

有两列使用CSS布局的主框架是问题。左栏是用3个gif和每行的跨度创建的树。有点像Windows资源管理器类型的树，但在加载时只有一个级别。

的布局是这样的：

主框架

DIV两列

DIV左列
形式1种
形式2具有14个隐藏的表单输入和一个资源管理器类型树

div右列

href链接

CSS（我改变了一些名字，并且排除了右列项目）。

body, html { 
    background: none repeat scroll 0 0 #FFFFFF; 
    color: #000000; 
    font-family: Verdana,Arial,Helvetica,sans-serif; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    white-space: nowrap; 
} 
#outer { 
    background: none repeat scroll 0 0 #FFFFFF; 
    height: 100%; 
    margin: 0; 
    width: 100%; 
} 
#leftTree { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px none; 
    cursor: pointer; 
    float: left; 
    margin-left: 20px; 
    margin-top: 10px; 
    width: 45%; 
} 
#rightColumnDiv { 
    background: none repeat scroll 0 0 #FFFFFF; 
    float: left; 
    margin: 0; 
    width: 50%; 
} 
.treeMenuSelected { 
    background-color: #0033CC; 
    color: #FFFFFF; 
    float: left; 
    font-size: 12px; 
    margin: 0; 
} 
.treeMenuNormal { 
    background-color: #FFFFFF; 
    color: #0033CC; 
    cursor: pointer; 
    float: left; 
    font-size: 12px; 
    margin: 0; 
} 
.treeMenuDisabled { 
    background-color: #FFFFFF; 
    color: #0033CC; 
    cursor: pointer; 
    float: left; 
    font-size: 12px; 
    margin: 0; 
} 

.header { 
    color: #000000; 
    font-family: Verdana,Arial,Helvetica,sans-serif; 
    font-size: 14px; 
    font-weight: bold; 
} 
h1 { 
    color: #000000; 
    display: inline; 
    font-family: Verdana,Arial,Helvetica,sans-serif; 
    font-size: 14px; 
    font-weight: bold; 
    line-height: 130%; 
} 
h2 { 
    color: #000000; 
    display: inline; 
    font-family: Verdana,Arial,Helvetica,sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
} 
h3 { 
    color: #000000; 
    display: inline; 
    font-family: Verdana,Arial,Helvetica,sans-serif; 
    font-size: 13px; 
    font-weight: normal; 
} 
a:link { 
    color: #3C5E9E; 
    text-decoration: none; 
} 
a:visited { 
    color: #3C5E9E; 
    text-decoration: none; 
} 
a:hover { 
    color: #3C5E9E; 
    text-decoration: underline; 
} 

一个scriptlet被用来从豆树，显示页面：通过jsp中我得到了豆中的所有数据线

<%=page.getTree().toString()%> 

步进线，然后将其显示树只有第一个。然后调用一个javascript函数来填充正确的列信息。

问题：

在旧的机器（不知道硬件的），在随机时间左栏显示树斜，在屏幕级联，而不是垂直;但是，另一列正常显示。我已经花了两天的时间，不能复制它。我也没有截图。它只发生在使用这棵树的页面上。

我正在使用IE工具，还有FF的萤火虫（即使它是一个IE问题），试图找出问题出在哪里并复制它。

• 删除隐藏字段中的一些数据会导致树根本不显示。
• 制作输入文字将水平移动第一棵树，但其余显示正常。
• 我回顾了CSS本身，并没有看到任何可能导致此情况的内容。
• 我认为这可能是页面加载的时间问题，但所有数据都从后端返回给bean，然后在完成后传递给页面。

主要问题是确定问题发生的位置，我无法做到这一点。我不知道它是否与IE错误，CSS或什么有关？有关如何解决此问题的任何想法？

更新：

我也发现，当出现问题时，页面加载罚款，那么树重新加载，这就是当问题出现了。似乎CSS渲染的时间可能是原因，因为这些列是使用CSS构建的。

Answer 1

这是一个奇怪的。我从来没有可以复制错误，但由于它似乎是一个CSS渲染问题，我通过使用代码控制css来解决问题。

使用链接指向blank.css文件，然后使用jQuery有：

$('html').hide();

当页面完全加载，点到正规的CSS。为IE添加了一项检查以使用其专有方法。

$(document).ready(function() { 
    if (document.createStyleSheet) { 
     document.createStyleSheet("/... <path>/blank.css"); 
    }else{ 
     $("head").append($("<link type='text/css' href='/... <path> /blank.css' rel='stylesheet' /> ")); 
    } 

    $('html').show(); 
}); 

然后使用文档准备好显示正确的页面，一切准备就绪后显示。

后果： 由于测试服务器上的网络问题，我可以实际查看错误，发生约1/2秒，然后我的修正，这没有工作！

但是，由于jQuery和IE8之间的另一个问题，document.ready（）在应该的时候并没有触发，因此需要另一个解决方案。这里是关于document.ready（）问题的link。

我能闯过与特征检测代码，并使用load（），它等待，直到所有图像，框架等..完全加载对比的document.ready的交互状态：

$(window.load(function(){ 
... 
}); 

这个工作对IE和Safari浏览器，但对于FF和铬，我不得不使用：

$(document).ready()...

我也有在IE8有条件的意见，这是我删除，因为他们不再需要我改变了隐藏/ show使用HTML代替正文，我在上面的代码中也进行了修改，并修复了我遇到的其他问题。我希望它能帮助别人，因为我在这方面花了很多时间。由于它是遗留代码，我不得不使用我所拥有的而不是更好的解决方案来放置jquery树。

决赛：只有在IE 8.0.6

实际的错误。有一个CSS错误，而不是忽略它，IE会停止渲染创建错误的CSS。