1

这里减少了测试用例。

我试图理解为什么会发生这种情况。

如果我有一个<a>inside并在或链接高度<h2>上设置的行高大于.<body><h2><h2>

[更新澄清] 问题是 .title a 的计算高度为 58px，而其父 h2.title 的计算高度为 50px。我希望它们都具有相同的计算高度。[/更新]

我已经给它们两个底部边框以更好地说明问题。

[更新 2] 我已经阅读了line-height 规范以尝试理解这一点。

a从我对规范的阅读来看，块级元素中的内联元素似乎h2应该继承父行高。我在这里编辑了我的示例，在h2. 给出ainline-block 的显示显然使它适合，但它仍然没有通过以及完全删除 line-height （因此使用浏览器默认 line-height 1.2）。

这可能不是问题，我只是想了解这种行为。

[更新 3] 我已经意识到，如果我将 的 更改line-height为a大于盒子h2的总高度（上面示例中的粉红色）确实会增加，所以是从. 令人困惑的是链接高度（可点击区域）和边框底部位置不会改变，而边框底部会随着行高移动。h2aline-heighth2h2

4

4 回答 4

0

我没有看到你的问题。在您提供的链接中，绝对没有什么奇怪的。您在 h2 中有一个链接。所以链接的字体大小得到h2的字体大小。但是 a 不比 h2 大。

于 2012-07-17T11:33:57.813 回答
0

您是否尝试过删除 的边距<H3>？在大多数浏览器中，它的默认边距为 0.5em。

如果这是问题，您可以阅读有关Reset CSS的内容。

编辑：
您有 2 种类型的容器，一个具有严格固定高度的浮动块元素；并且一个内联女巫具有自动仇恨..和默认边距和间距（想象一个链接作为段落的一部分......）。

要获得预期的结果，您可以 display:inline-block在<a>. 所以它们都将被视为具有固定高度的盒子。

http://dabblet.com/gist/5219955

于 2013-03-21T16:35:24.410 回答
0

这不是问题吗？

但是添加display:block;到您的锚点，它会更像您期望的那样

于 2012-07-17T11:36:22.100 回答
0

你有一个包含链接的 h2。

h2 和链接的行高为 1（继承），但链接的明确字体大小为 3em。

这意味着，字体大小作为容器更大，这可能会导致在不同的浏览器中产生不同的结果。

在 Firefox（版本 13）中，结果是父容器（h2）的顶部和底部溢出。

于 2012-07-17T11:36:27.440 回答