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

Question

我注意到 Chrome 可以很好地处理将 span 元素动态添加到现有元素并应用 -column-width CSS 属性的情况。但是，Firefox 没有。在下面这个简单的示例中，我们有一个名为 addSpan() 的 javascript 函数，它创建一个 span 元素并将其附加到 id = "content"的 div。这个 DIV 恰好应用了 -column-width 属性。如果您在 Chrome 上运行此代码，addSpan() 函数会在内容末尾正确添加一个新的 span 元素。在 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>

Answer 1

解决了。正如我所怀疑的那样，这是一个强制 Firefox 重绘元素的问题。将以下行添加到 addSpan( ) 函数后，问题得到解决。

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