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在elm.setAttribute('class','x')重新绘制UI之前不会注册类名更改.

解决方案是使用表单 elm.className = 'x'

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

Answer 2

听起来像你需要强制重绘这个元素的UI.有几种方法可以做到这一点,但以下是最有效的方法......

// elm is a reference to your element
var disp = elm.style.display;
elm.style.display = "none";
var redrawFix = elm.offsetHeight;
elm.style.display = disp;

这是我在Ajaxian上发现的另一种方法......

function redraw(elm) {
  var n = document.createTextNode(' ');
  elm.appendChild(n);
  setTimeout(function(){ n.parentNode.removeChild(n) }, 0);
  return elm;
}