字体更改的额外空间答案

【问题标题】：Extra space with font change字体更改的额外空间
【发布时间】：2012-04-08 23:37:28
【问题描述】：

我正在尝试清理模板，但我遇到了添加额外像素破坏悬停效果和页眉/页脚溢出的问题。

Template link

正如您将鼠标悬停在任何链接上时所看到的，它向下移动了一个像素。明智的样式表都在 em 中，以使其具有响应性。如果我将字体大小保持为 1em，一切正常，但只需将其更改为 .75em，就像我在那里一样，它会破坏它一点。

CSS Direct Link

更新：不确定它是否被认为是“hacky”，但我将 span 放在每个链接容器内，这样我就可以在不改变链接容器行高的情况下更改字体大小。这似乎工作正常

【问题讨论】：

嗯，你是对的。我正在检查 FF，但只是查看了 IE，它也有问题。

标签： html css positioning

【解决方案1】：

尝试添加或删除行高line-height。

例如：

<div style="line-height:30px;">Div content</div>

【讨论】：

是的，我已经在它自己和它的父母身上试过了。问题是我使用 line-height 垂直居中容器内的链接。
@Colby 尝试填充垂直对齐。添加上下填充（例如 10 ）并将高度降低两倍（此处为 20）
试过了，因为我减少了容器不粘在容器顶部的字体，所以顶部也有一个间隙......所以我不能把它移下来。不过我会继续玩这个

【解决方案2】：

<script type="text/javascript">
    $(document).ready(function () {
        $('#header').css('width', $("#header").width());
    });
</script>
<li id="header"><a href="#">Header</a><li>

始终保持相同的宽度

【讨论】：

Hm :/ 不确定宽度是这里的问题