在这种情况下，确切的行高如何工作

【问题标题】：How does exactlly line-height work in this case在这种情况下，确切的行高如何工作
【发布时间】：2012-08-20 20:53:30
【问题描述】：

在这个问题positioning text of anchor within a div 并给出了我在这里重复的相同代码：

HTML 标记

<div id="header"> 
    <a href="cattle.html" class="current">Cattle Farms</a> 
</div>

CSS 样式

#header a { 
    width: 100%; 
    height: 100%; 
    display: block; 
    font-size: 25px; 
}

回答

div#header a { 
    width: 100%; 
    height: 100%; 
    display: block; 
    text-indent: 20px; 
    line-height: 350px; 
}

我的问题是为什么 line-height 不能使 a 突破 div

【问题讨论】：

【解决方案1】：

它确实突破了 div。如果你在a 标签内放置一个span 并给它一个inline-block 的显示（和一个背景颜色，这样你就可以看到它）你会意识到它确实如此。请记住，跨度继承了行高。看看：

给a 一个更大的行高，没有其他任何东西你也可以意识到它正在突破 div：http://jsfiddle.net/fnX9n/7/

【讨论】：

在 FF 中使用没有 span 元素的 Firebug 查找它。 Firebug 显示 a 元素包含在 div#header 中，即使我给出 line-height: 500px;
它只是移动的文本。不是锚。
我没有收到关于您的 cmets 的警告。我现在太累了也回答。我明天回来。抱歉...但是，基本上，由于您在 a 元素上设置了特定高度（显示块），它不再是决定它的高度的行高 - 它是......好吧，高度。 line-height 仍然生效，只是不再决定元素的高度，因为你在设置高度的时候选择了自己设置。