Дополнительное пространство с изменением шрифта

Question

Я пытаюсь очистить шаблон и у меня возникают проблемы с добавлением дополнительного пикселя, который нарушает эффекты при наведении и переполнение верхнего / нижнего колонтитула.

Ссылка на шаблон

Как видно, когда вы наводите курсор на любую из ссылок, она сдвигается на один пиксель вниз.Все, что нужно для таблицы стилей, находится в них, чтобы позволить ей быть отзывчивой.Если я сохраню размер шрифта на 1em, все будет работать нормально, но просто меняю его на .75em, как будто он у меня есть, он немного ломается.

Прямая ссылка CSS

Обновление: не уверен, считается ли это "хакерским", но я поместил span внутри каждого из контейнеров ссылок, чтобы я мог изменять размер шрифта без изменения высоты строки контейнера ссылок.это, кажется, работает нормально

Answer 1

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

чтобы всегда оставаться одинаковой ширины

Answer 2

Попробуйте добавить или удалить высоту строки line-height .

Например:

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