CSS Transition导致链接文本意外移位，如何阻止该问题发生？

我看了你的代码，问题出在元素盒模型尺寸不稳定以及多余的浮动设置导致的布局波动，下面是具体的分析和修复方案：

问题根源 #

1. 未预留边框空间：你给header a设置了border-width: thick;，但没指定border-style和border-color，默认边框不会被渲染、不占据空间。浏览器初始渲染时可能因为这个不完整的边框属性出现微小波动，导致移位。
2. 多余的浮动设置：header li同时用了float: left和display: inline-block，浮动元素本身就是块级表现，这会干扰元素垂直对齐，引发布局跳动。
3. 导航margin的对齐问题：header nav的margin: 10px会让导航区域向下偏移，和左侧#branding的标题不对齐，视觉上产生移位感。

修复后的代码 #

CSS部分 #

body{ 
  background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(37,37,82,1) 35%, rgba(38,54,82,1) 100%); 
  color: white; 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 1.2em; 
  padding:0; 
  margin:0; 
}
#Title{ 
  font-size: 3em; 
  text-align: center; 
}
/*Global*/
.container{ 
  width: 80%; 
  margin: auto; 
  overflow: hidden; 
}
header { 
  background: rgba(0, 0, 0, 0.5); 
  min-height: 50px; 
  border-bottom: #ef3331 3px solid; 
}
#branding { 
  float: left; 
  display: inline; 
}
#branding h1 { 
  margin: 0; 
  padding: 10px 0; /* 添加padding让标题垂直居中 */
}
header nav { 
  float: right; 
  margin: 10px 0; /* 只保留上下margin，避免左右值干扰布局 */
  display: inline; 
}
header li { 
  display: inline-block; /* 移除多余的float: left */
  vertical-align: middle; /* 确保导航项垂直对齐 */
}
header a { 
  overflow: hidden; 
  box-sizing: border-box; 
  border-radius: 5px; 
  color: #fff; 
  text-decoration: none; 
  text-transform: uppercase; 
  font-size: 15px; 
  background-color: transparent; 
  transition: 0.3s; 
  padding: 16px 22px; 
  text-align: center; 
  border: thick solid transparent; /* 预留透明边框空间，避免尺寸变化 */
}
header a:hover { 
  background-color: black; 
}
ul { 
  margin: 0; 
  padding: 0; 
}

HTML部分（无需修改） #

<header>
  <div class="container" style="padding: 20px 0px;">
    <div id="branding">
      <h1>Anđelo Motika Design</h1>
    </div>
    <nav>
      <ul>
        <li>
          <a href="index.html">
            <span>HOME</span>
          </a>
        </li>
        <li><a href="#"> ABOUT ME </a></li>
        <li><a href="#"> GALLERY </a></li>
      </ul>
    </nav>
  </div>
</header>

关键修复说明 #

• 添加透明边框：border: thick solid transparent; 让边框提前占据空间，hover时只改变背景色，元素尺寸完全不变，彻底解决移位问题。
• 移除多余浮动：去掉header li的float: left，用inline-block配合vertical-align: middle实现横向排列，同时保证垂直对齐。
• 优化垂直居中：给#branding h1添加上下padding，让左侧标题和导航链接垂直居中对齐，视觉更协调。
• 调整nav的margin：只保留上下margin，避免左右值影响布局宽度。

修改后，导航链接hover时只会平滑改变背景色，不会出现任何移位，页面加载时的布局也会稳定。

内容的提问来源于stack exchange，提问作者Anđelo Motika