CSS不适用于动态创建的元素在IE 7？ [英] CSS doesn't apply to dynamically created elements in IE 7?

问题描述

仍在寻找答案。

更改或重新分配到过滤器的 innerHTML 成功重新绘制元素，

添加其他子节点（包括文本节点）不会强制重绘。

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

< hr>

在我正在开发的项目中，我动态生成（使用javascript）过滤器，如下所示：

 < div class =filter> 
< a ... class =filter_delete_link>删除< / 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事件），但是，在IE 7中， 
 
 
 
在Firefox / Chrome / IE8中一切正常。
 
 
 
使用IE8开发工具，设置为IE7模式，浏览器可以看到新的元素，可以看到CSS，但只是不应用CSS。
 
 
 
有没有办法强制IE重新加载样式，或者有更好的方法来解决这个问题？
 
 
 
 
 
 
 strong> 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）; 
 
 //更多相同... 
 
 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）; 
 
 //其他无关的东西... 
 
 //由Josh Stodola提供
 //redraw(this.root）; 
 
 return nNewFilter; 
} 
} 
  
 
 
解决方案
问题，我发现IE 6/7没有注册类名改变与 elm.setAttribute（'class'，'x'），直到UI重新绘制。
 
 
 
解决方案是使用 elm.className ='x' 
 
 
 
 **从IE9 quirks移到标准模式时，这个问题也很明显。解决方案是一样的。
 
Still looking for an answer.

Changing or reassigning to the filter's innerHTML successfully redraws the element, but breaks my script, so that's out.

Adding additional child nodes, including text nodes, does not force a redraw. Removing the added node does not force a redraw.

Using the ie7.js family of scripts does not work.



In the project I am working on, I dynamically generate (with javascript) filters that look like this:
<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>
And I have CSS that applies to each filter (for example):
.filter a.filter_delete_link{
    display:block;
    height:16px;
    background: url('../images/remove_16.gif') no-repeat;
    padding-left:20px;
}
However, it seems in IE 7 (and probably 6 for that matter), these styles don't get applied to the new filters.

Everything works perfectly in Firefox/Chrome/IE8.

Using the IE8 developer tools, set to IE7 mode, the browser can see the new elements, and can see the CSS, but just isn't applying the CSS.

Is there a way to force IE to reload styles, or perhaps is there a better way to fix this?



The JavaScript: (simplified)
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;
    }
}

解决方案
The problem, I've discovered is that IE 6/7 doesn't register the class name changes with elm.setAttribute('class','x') until the UI is redrawn.

The solution is to use the form elm.className = 'x'

**This problem was also noticeable from moving from IE9 quirks to standards mode. The solution was the same.

                        
这篇关于CSS不适用于动态创建的元素在IE 7？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！