javascript 画像 CSS は IE 7 で動的に作成された要素には適用されませんか?




javascript canvas 画像 (6)

まだ答えを探しています。

フィルタの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;
    }
}

IE6 / 7には、 createElementを使ってDOMに要素を追加したり追加したりすることに関する多くのproblems/bugs/misbehaviourscreateElementます。 クロスブラウザーとの互換性のある方法ですべての作業を行い、IE6 / 7固有の不正行為を(ほとんど)すべて考慮しているので、2倍にする必要はありませんので、 jQueryに切り替えることを強くお勧めします世界が認識しているすべてのブラウザで動作するようにするコード量。 ここに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でノードをクローンしないようにしてください。これはしばしば叙事詩的な失敗です。 むしろ最初から新しいノードを作成してください。


この要素の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;
}

いくつかの要素の終わりにあなたが行方不明になっているかもしれませんか?

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

要素の幅と高さは必要ありませんか? 私はディスプレイを知っている:ブロックは幅を与える必要があります:100%、しかしIEは明るくないです。 幅を指定すると何か変わりますか?


私が発見した問題は、IE 6/7は、UIが再描画されるまでelm.setAttribute('class','x')クラス名の変更を登録しないということです。

解決策は、 elm.className = 'x'という形式を使用することelm.className = 'x'

**この問題はIE9の癖から標準モードに移行したことでも目立っていました。 解決策は同じでした。


このスレッドでは、他のコメントと回答を除いて、Prototypeライブラリを使用してこの問題を解決しました。

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

単に、親を取得し直してください。 ブラウザモード:IE8、ドキュメントモード:IE8、ブラウザモード:IE7、ドキュメントモード:IE7の両方を使用してIE8でテストされています。 恐ろしい奇妙なモードでテストしていない。





internet-explorer-6