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

引用OP:

div浮かせたコンテナの上に浮かんでいることに問題があります...

通常、何かを行うと、ページ上の他のコンテンツがその周りfloat:を流れます。

引用OP:

テキストの横にストライプがあるはずですが、Chrome では取り消し線のように見えます。

「取り消し線」の意味がわかりませんが、class.stripeを持つ要素を幅 100% に定義しました。つまり、親の幅の 100% になります。この場合、 の親は.stripeclass を持つ要素.wrapperです。クラスには幅が定義されていないため、.wrapperデフォルトでは、ウィンドウである親の幅の 100% になります。したがって、定義したとおり、ストライプはウィンドウの幅の 100% になります。

引用OP:

ここで何がうまくいかないのか、そしてその理由を誰かが私に説明できるかどうか疑問に思っていました.

あなたのコードについて...

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

display: inlineコンテンツ フロー内の要素のプロパティです。

ただし、position: absolute要素をコンテンツ フローから外します。

このままでは意味がありません。つまり、同時に流れの中にいることも、流れの外にいることもできません。

これは、CSS2 Visual Formatting Modelと、通常のフロー、フロート、および絶対配置の詳細な比較を説明する W3C 仕様です。

于 2012-04-23T22:32:17.083 に答える