Question

这是一个一直困扰着我的问题。我不确定如何描述它除了我遇到问题，div浮动在浮动容器上，这似乎只是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;
}

我已经找到了解决方法，但我只是想知道是否有人可以向我解释这里出了什么问题以及原因。如果没有，我会以愉快的方式继续......

Answer 1

引用OP：

我遇到了div漂浮在浮动容器上的问题......

通常情况下，当您float:时，页面上的其他内容应围绕流动。

引用OP：

文字旁边应该有一个条纹，但在Chrome中，它看起来像一个透印。

我不确定你的“删除”是什么意思，但你已经将类.stripe的元素定义为100％宽，这意味着它将是其父级宽度的100％。在这种情况下，.stripe的父级是具有类.wrapper的元素。由于.wrapper类没有定义的宽度，因此默认情况下，它的宽度将是其父窗口的100％。因此，正如您所定义的那样，条带的宽度将是窗口的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。

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

1 个答案: