线高和线字体大小关系

Question

这对我来说很难正确但让我试试。

我有水平ul li a菜单：

请注意我省略了一些简单的CSS

<ul>
    <li class='featuring'><a href='#'>Whatever</a></li>
    <li class='empty-item'></li>
    <li><a href='#'>Item1</a></li>
    <li><a href='#'>Item2</a></li>
    ...
</ul> 

ul li a{
    line-height: 2.4em;
    font-size: 1.1em;
    ...
}
ul li.empty-item{
    border-top: 1.7em solid white;
    border-bottom: 1.7em solid white;
    border-left: 1em solid #240B3B;
}

上面的代码给出了这个：

除了我想改变那种kindle字体大小之外，哪个很棒，所以我补充说：

ul li.featuring a{
    font-size: 1.4em;
    ...
}

出现不必要的失真：

我想我不太了解行高属性？我虽然在更改ul li.featuring a字体大小后，容器大小将保持不变，但只有目标元素内的字体大小会改变，而是元素的高度会缩放，同时保留其余菜单项的比例相同且不同步。 我认为行高（3.4em）和字体大小（1.4em）差异（2em）被切成两半并均匀分布，这意味着容器高度不会改变???

希望很清楚。

谢谢。

Answer 1

我确信你现在已经得到了一个答案，但是因为没有人会跳过这个，所以我会试一试。

line-height不是问题，因为它是相对VS绝对测量单位的问题。

em是基于字体大小的相对度量单位。当您增加字体大小时，您会增加em中衡量的所有属性值，例如此处的line-height。

• 原文：http://jsfiddle.net/MWuHL/
• 添加CSS（显示额外空间）：http://jsfiddle.net/MWuHL/1/

使用像px这样的绝对单位不会因字体大小而改变：

• 添加了CSS，但在px中测量行高：http://jsfiddle.net/MWuHL/2/