0

jsp にレガシー コードのバグがあり、それを複製して修正しようとしています。彼らは、div、Java 1.6 のフレームを使用しています。JBoss 4.3、jQuery 1.6.2、およびスクリプトレット (JSTL なし)。古いものと新しいものが混在しています。

レイアウトに CSS を使用した 2 列のメイン フレームが問題です。左の列は、3 つの gif と各行のスパンで作成されたツリーです。Windows エクスプローラー タイプのツリーに似ていますが、ロード時には 1 つのレベルしかありません。

レイアウトは次のようになります。

メインフレーム

div 両方の列

div left column
フォーム 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;
}

スクリプトレットを使用して、Bean からページに表示するツリーを取得します。

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

jsp を 1 行ずつステップ実行すると、Bean からすべてのデータが取得され、最初にツリーのみが表示されます。次に、javascript 関数が呼び出されて、右側の列情報が入力されます。

問題：

古いマシン (ハードウェアが不明) では、左の列にツリーが垂直ではなく斜めに表示され、画面全体にカスケード表示されることがあります。ただし、他の列は正常に表示されます。これに2日間費やしましたが、複製できません。また、スクリーンショットもありません。ただし、このツリーを使用するページでのみ発生します。

私は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();
});

次に、すべての表示準備が整ったら、正しいページを表示する準備が整ったドキュメントを使用します。

余波: テスト サーバーのネットワークの問題により、約 0.5 秒間発生したエラーを実際に確認することができました。その後、私の修正が機能しました。

ただし、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 に答える