在悬停时显示内容后，Div 高度发生变化，而本不应该发生

Question

我有一个带有两个子元素的锚标签：一个很棒的图标和一个跨度。在将鼠标悬停在锚点上之前，不会显示跨度。 问题是，在我的网站上，当使用

inline

显示跨度时，父锚点的高度会增加。无论文本有多大，即使我降低了跨度的字体大小或行高，也会发生这种情况。

我已尝试隔离问题的代码，但无法复制该问题。无论如何，这里是：

:root {
    --darkblack: #000615;
    --black: #0B1721;
    --lightblack: #141B37;
    --yellow: #F7C921;
    --darkyellow: #a28b2a;
    --cyan: #21B7FF;
    --darkcyan: #1c7eaf;
    --magenta: #FF217D;
    --darkmagenta: #531a3b;
}

.nav {
  align-items: flex-end;
}

.nav-pills .nav-link {
  width: fit-content;
}

.nav-pills .nav-link.active {
   color: var(--black) !important;
   background-color: var(--cyan);
 }

.nav-pills .nav-link:not(.nav-link.active) {
  color: var(--cyan) !important;
  cursor: pointer;
}

.nav-pills .nav-link:hover > .nav-title {
  display: inline !important;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<row class="row">
  <column class="col-10">
    
  </column>
  <column class="col-2">
    
    <ul class="nav nav-pills flex-column mb-auto">
    <li class="nav-item">
        <a href="#" class="nav-link active" aria-current="page">
            <i class="fa-solid fa-book"></i>
            <span class="d-none nav-title">Test</span>
        </a>
    </li>
    <li>
        <a class="nav-link" data-id="tags">
            <i class="fa-solid fa-tags"></i>
            <title class="d-none nav-title">Tags</title>
        </a>
    </li>
</ul>
    
  </column>
</row>

我尝试检查跨度、图标和文本的每一条 CSS 规则，看看禁用任何规则是否可以解决问题，但唯一能解决问题的规则是

.fa-classic, .fa-regular, .fa-solid, .far, .fas {
  font-family: "Font Awesome 6 Free";
}

它是从 FontAwesome 库中获取的，而且我也不能因为删除它而破坏图标而直接替换它。我似乎无法找出是什么导致了这个问题。有人知道吗？

这是我网站上问题的视觉效果：

Answer 1

改变高度对我来说不会发生，但你可以定义高度，以防止随着元素上下文的改变而改变高度 例如

.nav-link{
           height: 25px; **other rules**
         }