1

ここでテストケースを減らしました。

なぜこれが起こるのか理解しようとしています。

<a>内に があり、またはリンクの高さの<h2>いずれかに行の高さを設定すると、よりも大きくなります。<body><h2><h2>

[明確にするための更新] 問題は、.title a の計算された高さが 58px であるのに対し、その親である h2.title の計算された高さが 50px であるということです。計算された高さは両方とも同じであると予想していました。[/アップデート]

問題をよりよく説明するために、両方に下の境界線を付けました。

[更新 2] これを理解しようと、行の高さの仕様を読みました。

a仕様を読んだところ、ブロックレベル要素内のインライン要素h2は親の行の高さを継承する必要があるようです。ここで私の例を編集して、上の行の高さを大きくしましたh2。inline-block の表示を与えると、a明らかにフィットしますが、それでも行の高さを完全に削除するだけでなく、行も通過しません (したがって、ブラウザのデフォルトの行の高さ 1.2 を使用します)。

これ自体はおそらく問題ではありません。動作を理解したいだけです。

[更新 3]の をボックス全体の高さ(上記の例ではピンク)より大きくするように変更するline-heightと、はからを継承していることに気付きました。紛らわしいのは、リンクの高さ (クリック可能な領域) と境界線の下の位置が変わらないのに対し、境界線の下は行の高さとともに移動することです。ah2h2aline-heighth2h2

4

4 に答える 4

0

それは問題ではありませんか？

ただしdisplay:block;、アンカーに追加すると、期待どおりに動作します

于 2012-07-17T11:36:22.100 に答える
0

リンクを含む h2 があります。

h2 とリンクの行の高さは (継承されたように) 1 ですが、リンクのフォント サイズは明示的に 3em です。

つまり、フォント サイズがコンテナーよりも大きいため、ブラウザーによって結果が異なる可能性があります。

Firefox (バージョン 13) では、結果として、親コンテナー (h2) の上部と下部にオーバーフローが発生します。

于 2012-07-17T11:36:27.440 に答える
0

あなたの問題はわかりません。あなたが提供するリンクには、奇妙なことは何もありません。h2にリンクがあります。したがって、リンクのフォント サイズは h2 のフォント サイズになります。しかし、a は h2 よりも大きくはありません。

于 2012-07-17T11:33:57.813 に答える
0

の余白を削除しようとしました<H3>か? ほとんどのブラウザでは、デフォルトの余白は 0.5em です。

これが問題だった場合は、Reset CSSについて読むことができます。

編集：
厳密に固定された高さのflotedブロック要素の2種類のコンテナがあります。インラインウィッチには自動ヘイト..とデフォルトのマージンとスペースがあります（リンクが段落の一部であると想像してください...）。

期待される結果を得るに display:inline-blockは、<a>. したがって、どちらも高さが固定されたボックスとして扱われます。

http://dabblet.com/gist/5219955

于 2013-03-21T16:35:24.410 に答える