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怪癖到标准模式，这个问题也很明显。解决方案是一样的。

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;

这是另一种方法I found on Ajaxian ...

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

Answer 3

IE6 / 7在使用createElement在DOM中创建和添加元素方面有很多problems/bugs/misbehaviours。我强烈建议切换到jQuery，因为它以跨浏览器兼容的方式完成所有工作，并且已经（几乎）考虑了所有IE6 / 7特定的错误行为，因此您不需要结束增加一倍的代码，让它在世界上所知的所有浏览器中都能运行。这是一个copy'n'paste'n'runnable SSCCE：

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#add').click(function() {
                    var newElement = $('<div class="filter"><a href="#" class="delete">delete</a></div>');
                    $('#container').append(newElement);
                });
            });
        </script>
        <style>
            .filter { background: pink; }
            .delete { background: yellow; }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <button id="add">add</button>
    </body>
</html>

更新：根据评论，jQuery绝对不是一个选项。那么，你可以尝试的最好的方法是在元素被添加到DOM之后仅设置元素属性。也尝试不在IE6 / 7中克隆节点，这通常是史诗般的失败。而是从一开始就创建一个全新的节点。

Answer 4

在某些元素的末尾，你是否会遗漏？

<a ... class="filter_delete_link>Delete</a> missing "
<div class="filter_field> missing "

Answer 5

您在阅读"

的行上缺少<a ... class="filter_delete_link>Delete</a>

修改
我不认为这是IE7的问题，因为它似乎在这里工作正常 - http://jsfiddle.net/nhvrA/ 我会继续调查。

Answer 6

你不需要元素的宽度和高度吗？我知道显示：块应该给它宽度：100％，但IE不那么明亮。如果你提供宽度会有什么变化吗？

Answer 7

在此主题中构建其他注释和答案，我使用Prototype库解决了这个问题：

<div id"dynamically-added-block"> ... </div>
...
$("dynamically-added-block").up().show();

简单地说，获取父母并重新显示它。在IE8中测试，使用浏览器模式：IE8，文档模式：IE8和浏览器模式：IE7，文档模式：IE7。没有用可怕的怪癖模式进行测试。

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

7 个答案: