0

-column-width CSS プロパティが適用された既存の要素に span 要素が動的に追加される場合、Chrome は非常にうまく処理できることに気付きました。ただし、Firefox はそうではありません。次の簡単な例では、span 要素を作成し、それを id = "content" の div にアタッチする addSpan() という JavaScript 関数があります。この DIV には -column-width プロパティが適用されています。このコードを Chrome で実行すると、addSpan() 関数は新しいスパン要素をコンテンツの最後に正しく追加します。Firefox では、列のレイアウト全体が単純に壊れます。

これを修正する方法についてのアイデアはありますか? コンテンツ div 内に一連のテキストを追加して、少なくとも 3 つの列が表示されるようにします。

<style>

    #wrapper {
       width:200px;
       height:300px;
    }

    #content {
      height:300px;
      column-width: 200px;
      -moz-column-width: 200px;
      -webkit-column-width: 200px;
    }

</style>

<div id="wrapper">
<div id="content">
Bunch of text here.
</div>
</div>


<a href="javascript:void(0)" onclick="addSpan()">Click Me!</a>

<script>

function addSpan() {
    var sp = document.createElement("span");
    sp.innerHTML = "Something!";
    document.getElementById("content").appendChild(sp);
}

</script>
4

1 に答える 1

0

解決しました。私が疑ったように、それは Firefox に要素の再描画を強制することの問題です。この問題は、次の行を addSpan( ) 関数に追加すると修正されます。

document.getElementById("content").innerHTML =  document.getElementById("content").innerHTML;
于 2013-08-13T01:43:28.993 に答える