我注意到 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>
最佳答案
解决了。正如我所怀疑的那样,这是一个强制 Firefox 重绘元素的问题。将以下行添加到 addSpan( ) 函数后,问题得到解决。
document.getElementById("content").innerHTML = document.getElementById("content").innerHTML;
关于html - 在 Firefox 中,SPAN 元素不能动态添加到具有 -column-width 值的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18198407/