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

看起来“theDiv”是绝对定位的，所以要绝对确定:)您不仅需要指定它的顶部和左侧，还需要指定右侧和底部（或宽度和高度。）请参阅此以获取有关元素渲染的更多详细信息。案子。

于 2012-02-01T14:08:44.073 回答
0

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

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

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

于 2013-01-22T11:06:18.537 回答