1

AJAX呼び出しから返された結果を使用して、フォーム入力の下にポップアップ「オートコンプリート」ボックスを作成する次のレガシーコードがあります。このコードは Firefox 6 と IE9 で正常に動作します - 小さな div がポップアップします (スタイリングは Chrome が開発者ツールに表示するものです):

<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>

これ<div>は FF と IE で確認できますが、Chrome では<div>境界線まで折りたたまれているように見える が表示されます。奇妙なことに、開発者ツールを使用して以下の JavaScript コードのthis.oDiv.style.visibility = "visible";行にブレークポイントを設定すると、Chrome は を作成し、<div>それを境界線に折りたたまれたサイズで表示しますが、開発者ツールの [要素] タブに切り替えて試してみると、なぜか、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";
 }
4

2 に答える 2

0

これが必要かどうかはわかりません。しかし、私は同様の問題を抱えていました。ボタンクリックイベントでページに入力ボックスを動的に追加していました。Chrome のボタン クリック イベントで入力ボックスが追加されなかったとき、スクリプト タグは次のようになりました。

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

タイプがtext/x-javascriptであることに注意してください。そして、それをtext/javascriptに変更したところ、うまくいきました。この問題を解決したばかりなので、2 つのタイプの違いがわかりません。

于 2013-01-22T11:06:18.537 に答える
0

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

于 2012-02-01T14:08:44.073 に答える