Question

我有以下遗留代码，使用从AJAX调用返回的结果在表单输入下创建弹出“自动完成”框。此代码在Firefox 6和IE9中运行良好 - 它会弹出一点div（样式是Chrome在Developer Tools中显示的内容）：

<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代码中使用开发人员工具设置断点，则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";
 }

Answer 1

看起来“theDiv”绝对定位，所以要绝对确定:)你不仅要指定它的顶部和左边，还要指定右边和底部（或宽度和高度）。请参阅this了解更多信息有关您的案例中元素呈现的详细信息。

Answer 2

我不确定这是否是你需要的。但我遇到了类似的问题。我在按钮点击事件上动态地在我的页面上添加输入框。当Chrome中的按钮点击事件未添加输入框时，我的脚本标记如下：

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

请注意，该类型为 text / x-javascript 。然后我将其更改为 text / javascript ，然后就可以了。我刚刚解决了这个问题，所以不知道这两种类型之间的区别。

Chrome无法正确显示Javascript createElement div？

2 个答案: