2

这是一个困扰我一整天的问题。我不完全确定如何描述它，除了我在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;
}​

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

4

1 回答 1

1

引用操作：

我在div浮动容器上浮动时遇到问题...

通常，当你float:做某事时，页面上的其他内容应该围绕它流动。

引用操作：

文本旁边应该有一条条纹，但在 Chrome 中，它看起来像一个删除线。

我不确定您所说的“删除线”是什么意思，但是您已经将具有类的元素定义.stripe为 100% 宽，这意味着它将是其父元素的 100% 宽度。在这种情况下，其父级.stripe是具有 class 的元素.wrapper。由于.wrapper该类没有定义宽度，默认情况下，它将是其父窗口的 100% 宽度。因此，正如您定义的那样，条纹将 100% 与窗口一样宽。

引用操作：

我只是想知道是否有人可以向我解释这里出了什么问题以及为什么。

关于你的代码...

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

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

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

这种方式毫无意义。换句话说，它不能同时在流中和流外。

这是 W3C 规范，它解释了 CSS2 视觉格式模型以及正常流、浮动和绝对定位的详细比较。

于 2012-04-23T22:32:17.083 回答