html - 行高和字体大小的关系

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 字体大小后容器大小将保持不变，只有目标元素内的字体大小会发生变化，但元素的高度会发生变化，同时将其余菜单项保持相同比例并退出的同步。 我想到的是 line-height(3.4em) 和 font-size(1.4em) difference(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/