2

私は次のものを持っています( http://jsfiddle.net/gVZwr/4/ ):

<div>
    <label>From</label>
    <span>Some Content Goes Here</span>
</div>

span {
    display: inline-block;
    overflow:hidden;
}

IE8/9 では、ラベルとスパンが一致しません (ラベルがスパンよりも下にあります)。

どうして？？？ラベルを貼れば治るoverflow:hiddenのですが、何が原因なのか知りたいです。ラベルを付けるなど、古い「hasLayout」の修正を試みましたzoom:1が、具体的にはoverflow.

4

4 に答える 4

5

問題は、テキストのベースラインにベースラインがあるのではなく、ボックスの下端 (実際にはボックスの下マージン) にあるベースライン以外inline-blockに設定されている要素です。http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align最後の段落を参照してください。overflowvisible

次に、基本的にspan状況の の境界線の下端に対応するそのベースラインlabelは、ラベル内のテキストの実際のベースラインである のベースラインに揃えられます。したがって、 のテキストは視覚的labelに のテキストの下になります。span

WebKit はここで仕様に従っておらず、現在の動作に依存する WebKit 固有の非 Web コンテンツがあるため、それを変更することを望まないようです。WebKit で効果が見られないのはそのためです。

Opera 11 は、仕様ごとに IE や Firefox と同じことを行います。

ああ、修正に関しては、 の垂直方向の位置合わせを変更するか、labelを実際に にする必要があると仮定して、overflowを削除することができます。spanspaninline-block

于 2011-05-19T06:22:33.583 に答える
3

垂直方向の配置を試してください: http://jsfiddle.net/gVZwr/2/

于 2011-05-19T00:44:57.363 に答える
2

も作って<label> inline-blockみませんか？inline-block要素の垂直方向の配置に影響すると思います。

（そして、トピックから外れると、フォームフィールドのラベル付けなど、目的についての@josmhの回答を参照してください。）<label>

于 2011-05-19T00:46:06.310 に答える
0

おそらく、が何かにバインドさ<label>れることを意図しているためです。ここにいくつかの例があります。

于 2011-05-19T00:42:57.863 に答える