0

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

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

布局是这样的：

主机架

div 两列

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

div 右列

链接

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 构建的。

4

1 回答 1

0

这是一件很奇怪的事。我永远无法复制该错误，但由于它似乎是 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();
});

然后在一切准备就绪后使用 document ready 来显示正确的页面。

后果： 由于测试服务器上的网络问题，我能够实际查看错误，发生了大约 1/2 秒，然后我的修复确实有效！

但是，由于 jQuery 和 IE8 之间的另一个问题，document.ready() 没有按预期触发，这需要针对该问题进行另一个修复。这是有关 document.ready() 问题的链接。

我能够通过特征检测代码和使用 load() 来解决这个问题，它一直等到所有图像、帧等都完全加载，而不是 document.ready 的交互状态：

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

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

$(document).ready()...

我还为 IE8 提供了条件注释，由于不再需要它们而将其删除，并且我将隐藏/显示更改为使用 HTML 而不是正文，我也在上面的代码中进行了更改，这解决了我的其余问题曾经有。我把它拿出来是希望它能帮助别人，因为我花了很多时间在这上面。由于它是遗留代码，我不得不使用我所拥有的，而不是放入 jquery 树的更好的解决方案。

最终的：

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

于 2013-02-01T20:05:01.863 回答