javascript - Javascript 在 Internet Explorer 中生成的 html 代码出现问题

Question

我有一个带有表单的 html 页面。在此表单中，我为用户提供了 1 个输入字段，其类型设置为 file。表单通常是隐藏的。

当用户按下一个按钮时，表单出现，调用 jQuery.dialog() 函数。对话框创建得很好，但输入字段永远不会显示。我不确定它是否显示，或者只是放在屏幕之外。

同样的情况也发生在由 javascript 自动生成的表格中。该表由多个输入元素(尽管类型不同)和每行 1 个选择元素组成。现在 select 元素显示正确，所有 input 元素都没有显示。

这是 Internet Explorer 的问题吗？因为所有其他(主要)浏览器都可以正常显示它。对于主流浏览器，我指的是 Chrome、FF、Safari 和 Opera。

---

编辑 > 来源

页面中的表单:

<form title="Upload snapshot" class="hidden" enctype="multipart/form-data" id="fileUpload" name="fileUpload">
    <input type="hidden" name="command" value="load" />
    <input type="hidden" name="table" id="formTable" />
    <input type="file" id="uploadedFile" name="uploadedFile" />
</form>

将窗体变成对话框的函数:

function LoadDatabase(){
    var form = document.getElementById('fileUpload');
    var table = document.getElementById('formTable');
    $(table).attr('value', Settings['table']);
    $(form).dialog({
        position    : 'center',
        autoOpen    : true,
        width       : 500,
        modal       : true,
        draggable   : true,
        buttons     : {
        "Ok"    : function(){
            // Code to hande the file upload...
            $(form).dialog('close');
        },
        "Cancel" : function(){
            $(form).dialog('close');
        }
        },
        close       : function(){
        }
    });
}

由于表格的复杂性，生成表格的代码量相当大。基本上，js 获取的是 json 格式的条目集合。这个集合得到解码，并且对于每种类型的列，都会创建一个适当的单元格并将其添加到页面的文档中。这一切的核心是:

var tbodyNew =  document.createElement('tbody');
$(data.Data).each(function(value) {
    row=this;
    var trRowNew =  document.createElement('tr');
    $(trRowNew).attr('id', row['id']);
    var tdNew = document.createElement('td');
    var rowSelect = document.createElement('input');
    $(rowSelect).attr('type', 'checkbox');
    $(rowSelect).addClass('row-selector');
    $(rowSelect).addClass('hidden');
    $(tdNew).append(rowSelect);
    $(trRowNew).append(tdNew);
    for (var columnId in Columns) {
        tdNew = document.createElement('td');
        if (Columns[columnId].Name == 'id') {
            $(tdNew).addClass('hidden');
        }
        $(tdNew).attr('id', Columns[columnId].Name);
        $(tdNew).append(AddCell(columnId, row));
        $(trRowNew).append(tdNew);
    }
    $(tbodyNew).append(trRowNew);
});
$(tableNew).append(tbodyNew);
$(form).html('');
$(form).append(tableNew);

AddCell() 方法确定应使用的输入类型(复选框、文本等)。

---

编辑 2 > 额外图像

进一步解释正在发生的事情:

图像显示了背景中表格呈现的差异，以及对话框在前台的显示方式。

---

编辑3 > DOM检查

我检查了 Internet Explorer 中的 DOM 结构，我发现元素已放入页面中……只是没有呈现。似乎他们没有得到合适的高度和宽度。通过检查它们的样式，它表明这些属性设置为“自动”:

Answer 1

在解决此问题的过程中，我发现当输入的显示属性设置为表格行时，Internet Explorer 会卡住。删除所述属性将解决此问题。看起来，根据文档，这实际上是所需的功能。虽然奇怪的是其他浏览器没有遵循文档....