Chrome没有正确显示JavaScript createElement div？

问题描述

我有以下旧代码在表单输入下创建弹出式自动完成框，使用从AJAX调用返回的结果。此代码在Firefox 6和IE9中正常工作 - 它弹出一个小div（样式是Chrome在开发者工具中显示的样式）：

I have the following legacy code creating a popup "autocomplete" box under a form input, using results returned from an AJAX call. This code works fine in Firefox 6 and IE9 - it pops up a little div (styling is what Chrome shows in 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>

我可以看到< div> 在FF和IE中，但Chrome显示一个< div> ，显示为向下折叠到边框。奇怪的是，如果我在下面的JavaScript代码中使用Developer Tools在 this.oDiv.style.visibility =visible; 行设置断点，Chrome会创建< div> ，并以折叠到边框大小显示它，但如果我切换到开发人员工具中的元素标签，尝试查看原因，Chrome似乎重新计算我的< div> 突然出现，并且正确显示。如果我刷新，会再次破解。

I can see this <div> in FF and IE, but Chrome displays a <div> that appears to be collapsed down to its borders. Oddly, if I set a breakpoint using Developer Tools in the javascript code below at the this.oDiv.style.visibility = "visible"; line, Chrome creates the <div> and shows it with the collapsed-down-to-borders size, but if I switch to the Elements tab in Developer Tools to try to see why, Chrome seems to recalculate something and my <div> suddenly appears and is correctly displayed. If I refresh, things are broken again.

这是Chrome的错误，还是我的代码有问题？

Is this a Chrome bug, or is there something wrong with my code?

相关代码：

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";
 }

推荐答案

是你需要的。但我有一个类似的问题。我在一个按钮点击事件上动态添加我的页面上的输入框。
当Chrome中的按钮点击事件没有添加输入框时，我的脚本标记如下：

I am not sure if this is what you need. But I had a similar issue. I was dynamically adding input boxes on my page on a button click event.When the input boxes were not getting added on button click event in Chrome my script tag was as follows :

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

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

Notice that the type is text/x-javascript .And then I changed it to text/javascript and it worked then.I just solved this issue so don't know the difference between the two types.

这篇关于Chrome没有正确显示JavaScript createElement div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！