2

奇妙な CSS の動作に遭遇しました。ただし、Firefox、Chrome、および IE (9) でまったく同じように機能するため、CSS 標準の一部であると思われますが、その理由についての参照は見つかりません。

テキストを含む div があります。font-size を行の高さよりも大きく設定すると、div の高さは line-height を使用して計算されますが、コンテンツははるかに大きくなります。つまり、ボックス内のテキストはボックス自体よりもはるかに大きくなります。私はここで状況にjsfiddleを持っています:

http://jsfiddle.net/RVgzV/4/

マウスを境界ボックスの上に移動すると、div に入る前にホバー css がアクティブになることがわかります。同様に、ボックスの近くではあるがボックスの外側をクリックすると、javascript クリック イベントがアクティブになります。コンテンツ ボックスがここにある場所を確認するのが少し簡単です。

http://jsfiddle.net/RVgzV/5/

div の表示プロパティがインラインに設定されている場合、高さは正しく計算されます (これは、さまざまなスタイル上の理由で実行できません)。また、オーバーフロー プロパティを非表示に設定すると、問題は解決します。私には、これは内容物が含まれているボックスよりも大きいことを示していますが、その理由はわかりません. 特に、オブジェクトの「高さ」css ボックス モデル プロパティが、ページに表示される実際の高さよりも小さい理由を知りたいです。

私は CSS 仕様を調べましたが、そこに答えがありませんでしたが、何かが欠けているのではないかと思います。

編集

私が抱えている問題を参照している次のリンクを見つけましたが、それらのソースが何であるか、またはその理由がわかりません。

また、私が受け取ったいくつかの回答に応えて、CSSを修正する方法を探していないので、ホバーの問題はもう表示されません。そもそもなぜそれが起こっているのかを探しています。

再度編集 どうやら、ボックスの境界内にあるかどうかに関係なく、ボックスの内容はボックス上でホバーを呼び出します。（この回答に関するリスター氏のコメントを参照してください。私が本当に知りたいのは、この動作が仕様のどこから来たのかです。それはそこにありますか?それとも、すべてのブラウザーが同意した実装ですか?

4

2 に答える 2

1

div の外側にあるものを非表示にするには、overflow:hidden を使用します。

要素のブロック領域の外に子が存在し、ホバー可能であるため、正しく動作します。

この手法は、負のマージン/パディング/絶対配置などを使用してブロック要素の内側の部分を移動するために頻繁に使用されますが、これらの部分は常に親のホバー機能を維持します。

于 2012-04-10T17:49:53.893 に答える
0

div のサイズが正しくありません。これは正常な動作です。CSS の使い方が間違っています。div-height は、その中の行数によって定義されます。line-height よりも大きな font-size を指定しました。つまり、必要な行数を定義するには max-line-height のみを使用できます。

ところで、font-seize を line-height よりも大きく定義することに何の意味があるのでしょうか?

于 2012-04-10T17:28:59.893 に答える