Question

我将一个元素插入到一个位于p-tag内的span中。跨度具有相对位置，元素具有绝对位置。插入的div在FireFox中正常显示，但在Google Chrome中无法显示，请参阅以下屏幕截图：

FireFox中的结果：

the result in FireFox

Google Chrome中的结果：

the result in Google Chrome

这是代码：

<script>

var DV;

function fnInsert() {
    DV.appendTo($('#insertHere'));
}

$(document).ready(function () {
    DV = $('#DV').detach();
});

</script>

<style>

#daText {
    border: 1px solid #777;
    width: 500px;
    height: 200px;
    margin: 0px auto 0px auto;
    padding: 0px 10px 0px 10px;

    column-gap: 20px;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    -ms-column-gap: 20px;
    -o-column-gap: 20px;

    column-rule: 0px dotted #ccc;
    -webkit-column-rule: 0px dotted #ccc;
    -moz-column-rule: 0px dotted #ccc;
    -ms-column-rule: 0px dotted #ccc;
    -o-column-rule: 0px dotted #ccc;

    column-fill: balance;
    -webkit-column-fill: balance;
    -moz-column-fill: balance;
    -ms-column-fill: balance;
    -o-column-fill: balance;

    column-count: 3;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -ms-column-count: 3;
    -o-column-count: 3;
}

#daText p {
    font-family: arial;
    font-size: 14px;
    line-height: 22px;
    margin: 0px 0px 22px 0px;
    background-color: #FFFFAA;
}

#daText p:first-of-type {
    margin-top: 0px;
}

#daText p span#insertHere {
    position: relative;
    background-color: #0000FF;
    color: #FFF;
}

.CK {
    cursor: pointer;
    text-decoration: underline;
}

div#DV {
    position: absolute;
    top: -50px;
    left: 0px;
    background-color: #FF7777;
    height: 40px;
    width: 350px;
    border: 1px solid #000;
}

</style>

</head>
<body>

<div id="daText">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a sem <span id="insertHere">lobortis</span>, tristique lectus id, fermentum tellus. Pellentesque condimentum tincidunt dui, non interdum enim interdum varius. Nullam fringilla erat tellus, non facilisis felis lacinia non. Duis rhoncus arcu lobortis, consequat odio eget, sodales tellus. Nam consectetur tincidunt mauris, ut tempus magna faucibus ut. Morbi ultricies felis quis erat ultrices, id aliquet enim faucibus. Morbi tincidunt, sem a interdum euismod, lacus lorem cursus massa, eu sodales nisi metus vel dolor.<p>
</div>

<p>
    <span onclick='fnInsert()' class='CK'>insert div</span>
</p>

<div id="DV"></div>

</body>

在Chrome中，插入的div似乎属于下一栏。

当然我试着设置一个z-index，但它没有帮助..

我在这里创建了一个JSfiddle：http://jsfiddle.net/foleox/GppVK/ - 它使用jQuery（只是为了方便）。

有没有人知道让它在Chrome中运行的解决方案？是什么原因？

其他浏览器也会受到影响吗？

Chrome bug？：附加元素在多列div中无法正确显示

0 个答案:

Chrome bug？ ：附加元素在多列div中无法正确显示

0 个答案:

Chrome bug？：附加元素在多列div中无法正确显示