Question

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

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

布局如下：

主框架

div两列

div left column
表格1 表单2有14个隐藏表单输入和一个资源管理器类型树

div右栏

href links

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用于从bean中获取树以显示到页面：

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

逐行逐步通过jsp我从bean获取所有数据，然后它首先显示树。然后调用javascript函数来填充右列信息。

问题：

在较旧的机器上（不确定硬件），随机时间左栏以对角线方式显示树，在屏幕上层叠，而不是垂直;但是，另一列正常显示。我花了两天时间在这上面，不能复制它。我也没有屏幕截图。它只发生在使用此树的页面上。

我正在使用IE工具，还有使用FF的firebug（尽管这是一个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（）等待所有图像，帧等完全加载而不是文档的交互状态。

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

这适用于IE和Safari，但对于FF和Chrome我必须使用：

$(document).ready()...

我还对IE8进行了条件评论，我删除了因为它们不再需要而且我将hide / show更改为使用HTML而不是body，我在上面的代码中也更改了，并修复了其余部分我遇到的问题。我把这个放在希望它会帮助别人，因为我花了很多时间在这上面。因为它是遗留代码，所以我必须使用我所拥有的代码而不是更好的放入jquery树的解决方案。

<强>最终

实际错误仅在IE 8.0.6中。有一个CSS错误，而不是忽略它，IE将停止渲染CSS，这会产生错误。

IE 8的随机渲染问题

1 个答案: