javascript - CSS 不适用于 IE 7 中动态创建的元素？

Question

仍在寻找答案。

更改或重新分配给过滤器的 innerHTML 成功地重绘了该元素，但破坏了我的脚本，所以就这样了。

添加额外的子节点，包括文本节点，不会强制重绘。删除添加的节点不会强制重绘。

使用 ie7.js 系列脚本不起作用。

---

在我正在处理的元素中，我动态生成(使用 javascript)过滤器，如下所示:

<div class="filter">
    <a ... class="filter_delete_link">Delete</a>
    <div class="filter_field">
        ...
    </div>
    <div class="filter_compare">
        ...
    </div>
    <div class="filter_constraint">
        ...
    </div>
    <div class="filter_logic">
        ...
    </div>
</div>

我有适用于每个过滤器的 CSS(例如):

.filter a.filter_delete_link{
    display:block;
    height:16px;
    background: url('../images/remove_16.gif') no-repeat;
    padding-left:20px;
}

但是，似乎在 IE 7(可能是 6)中，这些样式不会应用于新的过滤器。

一切都在 Firefox/Chrome/IE8 中完美运行。

使用IE8开发者工具，设置为IE7模式，浏览器可以看到新元素，也可以看到CSS，只是没有应用CSS。

有没有办法强制 IE 重新加载样式，或者是否有更好的方法来解决这个问题？

---

JavaScript:(简化)

var builder = {
    ...
    createNewFilter: function() {
        var newFilter = document.createElement('div');

        var deleteLink = document.createElement('a');
        deleteLink.href = '#';
        deleteLink.setAttribute('class','filter_delete_link');
        deleteLink.title = 'Delete Condition';
        deleteLink.innerHTML = "Delete";
        newFilter.appendChild(deleteLink);

        var field = document.createElement('div');
        field.setAttribute('class','filter_field');
        var fieldSelect = this.getFieldSelectBox();
        field.appendChild(fieldSelect);
        newFilter.appendChild(field);

        // more of the same...

        deleteLink.onclick = function() {
            builder.removeFilter(newFilter);
        };
        fieldSelect.onchange = function () {
            builder.updateFilter(newFilter);
        }

        return newFilter;
    },
    addNewFilter: function() {
        var nNewFilter = this.createNewFilter(this.numFilters++);
        this.root.insertBefore(nNewFilter,this.nAddLink);

        //other unrelated stuff...

        //provided by Josh Stodola
        //redraw(this.root);

        return nNewFilter;
    }
}

Answer 1

问题是，我发现 IE 6/7 在重绘 UI 之前不会使用 elm.setAttribute('class','x') 注册类名更改。

解决方案是使用 elm.className = 'x' 的形式

**从 IE9 怪癖到标准模式时，这个问题也很明显。解决方案是一样的。