html - 标签从盒子里掉出来

Question

是的，我的标题很烂 :p

所以我有一个容器，其中包含 <div>秒。点缀在这个容器中的是 <span> s 标记标签。这些<span>我们有position:absolute使它们不干扰 <div> 的布局

#container {
    border:1px solid red;
    width:270px;
}
#container>div {
    display:inline-block;
    width:80px;
    height:80px;
    border:1px solid blue;
    margin:4px;
}
#container>span {
    position:absolute;
    background:#ccf;
}

<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>

在 Internet Explorer 中，这工作正常。
在 Chrome 中，它没有。标签从盒子里掉了出来。

我明白为什么会这样 - 这是因为 <span>在文档流中具有零宽度和高度，允许它挤入零剩余空间。

但是我想知道有没有其他方法可以达到我这里想要的效果？

编辑:Desired effect , Chrome's bad effect

Answer 1

真的没有完全到达你想要的地方，像这样的？向跨度添加了显示 block 。

#container {
    border:1px solid red;
    width:270px;
}
#container>div {
    display:inline-block;
    width:80px;
    height:80px;
    border:1px solid blue;
    margin:4px;
}
#container>span {
  display:block;
    position:absolute;
    background:#ccf;
}

<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><div></div><span>Marker</span><div></div><div></div></div>

强文本