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;

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

1 个答案: