在Firefox中，SPAN元素不能动态添加到具有-column-width值的元素中

Question

我注意到Chrome很好地处理了将span元素动态添加到现有元素并应用了-column-width CSS属性的情况。然而，Firefox不支持。在下面这个简单的示例中，我们有一个名为addSpan()的javascript函数，它创建一个span元素并将其附加到id = "content“的div。这个DIV恰好应用了-column-width属性。如果在Chrome上运行此代码，addSpan()函数会正确地在内容的末尾添加一个新的span元素。在Firefox上，它简单地破坏了整个列布局。

有什么办法解决这个问题吗？在content 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>

Answer 1

解决了它。正如我所怀疑的，这是一个迫使Firefox重新绘制元素的问题。将以下行添加到addSpan( )函数后，该问题已修复。

document.getElementById("content").innerHTML =  document.getElementById("content").innerHTML;