ChromeはJavascriptのcreateElement divを正しく表示していませんか？

Question

私はAJAX呼び出しから返された結果を使用して、フォーム入力の下にポップアップ "オートコンプリート"ボックスを作成する以下のレガシーコードを持っています。このコードは、Firefox 6とIE9で正常に動作します - それは少しのdiv（スタイリングはクロームデベロッパーツールで示したものです）ポップアップ表示：

<div id="theDiv" style="position: absolute; left: 0px; top: 21px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: green; border-right-color: green; border-bottom-color: green; border-left-color: green; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-image: initial; background-color: white; z-index: 1; visibility: hidden; "><div style="visibility: visible; ">[...autocomplete text here...]</div></div> 

を私はFFとIEでこの<div>を見ることができますが、Chromeはその<div>を表示しますその国境まで崩壊しているようだ。奇妙なことに、私がthis.oDiv.style.visibility = "visible";行の下のjavascriptコードでDeveloper Toolsを使用してブレークポイントを設定すると、Chromeは<div>を作成し、折りたたまれた境界線のサイズで表示しますが、Developer ToolsのElementsタブに切り替えるとなぜChromeが何かを再計算しているように見えて、<div>が突然表示され、正しく表示されます。リフレッシュすると、物事が再び壊れます。

これはChromeのバグですか、それともコードに問題がありますか？

関連するコード：

AutoComplete.prototype.onchange = function() 
{ 
    // clear the popup-div. 
    while (this.oDiv.hasChildNodes()) 
     this.oDiv.removeChild(this.oDiv.firstChild); 

    // get all the matching strings from the AutoCompleteDB 
    var aStr = new Array(); 
    this.db.getStrings("", "", aStr); 

    // add each string to the popup-div 
    var i, n = aStr.length; 
    for (i = 0; i < n; i++) 
    { 
     var iDiv = document.createElement('div'); 

     var myText = document.createTextNode(aStr[i]);   
     iDiv.appendChild(myText);  

     iDiv.FormName = this.FormName; 

     iDiv.onmousedown = AutoComplete.prototype.onDivMouseDown; 
     iDiv.onmouseover = AutoComplete.prototype.onDivMouseOver; 
     iDiv.onmouseout = AutoComplete.prototype.onDivMouseOut; 
     iDiv.AutoComplete = this; 
     iDiv.style.visibility = "visible"; 
     this.oDiv.appendChild(iDiv); 

    } 
    this.oDiv.style.visibility = "visible"; 
} 

Answer 1

は「theDivは」絶対に配置されているようにあなたがいないだけで、その上部と左も右と下（または幅と指定する必要がある:)ので、絶対に確かに見えますあなたの場合の要素レンダリングの詳細については、thisを参照してください。

Answer 2

これが必要な場合はわかりません。しかし、私も同様の問題がありました。私はボタンクリックイベントで自分のページに入力ボックスを動的に追加していました。入力ボックスがChromeで、ボタンのクリックイベントに追加取得されませんでした 次のように私のスクリプトタグは：タイプがテキスト/ X-javascriptのであること

<script type="text/x-javascript" language="javascript"> 

お知らせが。 そして、のテキスト/ javascriptに変更しました。 私はこの問題を解決したので、2つのタイプの違いは分かりません。