隨機渲染問題與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。