Chrome浏览器 - 绝对定位和浮动问题

以下是一直在困扰我的问题。我不确定如何描述它，除了我在漂浮在浮动容器上的div出现问题之外，它似乎只是Chrome中的一个问题。Chrome浏览器 - 绝对定位和浮动问题

看一看这个：http://jsfiddle.net/H8vVf/。在文本旁边应该有一个条纹，但在Chrome中，它看起来像是一条走向。

HTML：

<div class="wrapper"> 
    <div class="content">SOME GOOD TEXT</div> 
    <div class="stripe"></div> 
</div>

CSS：

.wrapper::after { 
    content: " "; 
    display: block; 
} 
.content { 
    float: left; 
} 
.stripe { 
    background-color: black; 
    width: 100%; 
    display: inline; 
    position: absolute; 
    height: 1em; 
}

，我想出了一个解决方法，但我只是想知道如果任何人都可以向我解释是怎么回事错误和原因。如果没有，我就继续我的快乐的方式...

来源

2012-04-23 sgcharlie

报价OP：

我有一个div漂浮在浮动容器的问题...

通常，当你float:东西时，页面上的其他内容应流周围它。

报价OP：

应该有一个旁分条文本，但在Chrome中，它看起来像一个透。

我不知道你所说的“划掉”的意思，但你定义与.stripe类元素为100％宽，这意味着这将是100％，其母公司的宽度。在这种情况下，.stripe的父级是类.wrapper的元素。由于.wrapper类没有定义的宽度，因此默认情况下，它的宽度是它的父窗口的100％。因此，如您所定义的那样，条纹将与窗口一样宽。

报价OP：

我只是想知道如果任何人都可以向我解释是怎么回事错误和原因。

关于你的代码...

.stripe { 
    background-color: black; 
    width: 100%; 
    display: inline; 
    position: absolute; 
    height: 1em; 
}

display: inline是在内容流中的元素的属性。

但是，position: absolute将元素从内容流中取出。

这样做没有意义。换句话说，在流程和中不能同时出现流程中的。

Here is the W3C spec which explains the CSS2 Visual Formatting Model以及detailed comparison of normal flow, floats and absolute positioning。

来源

2012-04-23 22:32:17 Sparky

谢谢你的解释（和编辑，因为我非常疲倦，问题很滑稽地解释）。我将来必须牢记这些联系。另外，我需要重新考虑我的解决方法。 – sgcharlie 2012-04-24 13:33:17

@Relic，OP要求解释，而不是解决方案。我给了他一个详细的解释，你没有。所以，因为你认为我低估了你的投票结果，你便投了我的票。优雅的行为。 SO上的一些最佳答案已经完全写出来......它们不仅仅是一个包含单词的jsFiddle链接，_“与......有关”。事实上，他的问题与你声称的无关，正如我在上面清楚解释的那样。 – Sparky 2012-04-24 21:51:36

Chrome浏览器 - 绝对定位和浮动问题

回答

相关问题