Chrome не отображает Javascript createElement div правильно? - PullRequest
Новая
       3

Chrome не отображает Javascript createElement div правильно?

1 голос
/ 20 января 2012

У меня есть следующий унаследованный код, создающий всплывающее окно «автозаполнение» под входом формы с использованием результатов, возвращаемых вызовом 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";
 }

Ответы [ 2 ]

0 голосов
/ 22 января 2013

Я не уверен, что это то, что вам нужно.Но у меня была похожая проблема.Я динамически добавлял поля ввода на своей странице при событии нажатия кнопки.Когда поля ввода не добавлялись при событии нажатия кнопки в Chrome, мой скрипт-тег был следующим: 

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

Обратите внимание, что тип text / x-javascript А потом я изменил его на text / javascript , и это сработало тогда.Я только что решил эту проблему, поэтому не знаю разницы между этими двумя типами.

0 голосов
/ 01 февраля 2012

Похоже, "theDiv" абсолютно позиционирован, поэтому, чтобы быть абсолютно уверенным :) вам нужно указать не только его верхнюю и левую сторону, но также правую и нижнюю (или ширину и высоту). Пожалуйста, смотрите this Подробнее о рендеринге элемента в вашем случае.

...