我遇到了一个问题，只有在Safari浏览器中出现 - 当我悬停在标题栏中的某个链接上时，该链接右侧的链接（字体粗细看起来变小）在链接悬停动画期间都会改变大小，一旦动画结束，这些链接就会恢复原始大小/字体粗细。非常奇怪的是，它只会影响链接被悬停的右侧（在代码中下方）的链接。
这是一张图片：
您可以看到图片中“游戏历史”右侧的链接比“游戏历史”左侧的链接要小（“游戏历史”是图片中正在悬停的链接）。当发生这种情况时，比图片中更加明显。
以下是我的代码：
链接在Firefox中看起来完美，即使鼠标悬停在链接上也是如此。我只在Safari中遇到了这个问题。非常感谢您的帮助！
这是一张图片：
您可以看到图片中“游戏历史”右侧的链接比“游戏历史”左侧的链接要小（“游戏历史”是图片中正在悬停的链接）。当发生这种情况时，比图片中更加明显。
以下是我的代码：
<ul class="nav_links_list">
<li>
<div><a class="head_link-nukun head_link--nukun" href="index.php"><span>H</span>ome</a></div>
</li>
<li>
<div><a class="head_link-nukun head_link--nukun" href="user_choice.php">Make Picks</a></div>
</li>
<li>
<div><a class="head_link-nukun head_link--nukun" href="game_history_calendar.php">Game History</a></div>
</li>
<li>
<a class="head_link-nukun head_link--nukun" href="userchoice_history.php?username=<?php echo $_COOKIE['username']; ?>">My History</a>
</li>
<li>
<a class="head_link-nukun head_link--nukun" href="full_leaderboard.php">Full Leaderboard</a>
</li>
<li>
<a class="head_link-nukun head_link--nukun" href="account_settings.php">Account Settings</a>
</li>
</ul>
以下是涉及的CSS：
/* Header Nukun link styles */
.head_link-nukun {
outline: none;
text-decoration: none;
position: relative;
font-size: 10pt;
line-height: 1;
color: #9e9ba4;
display: inline-block;
}
.head_link--nukun {
/*color: #E3E8DC;*/
color:#EEEEEE;
/*font-weight: 900;*/
text-transform: uppercase;
overflow: hidden;
padding: 10px 0;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.head_link--nukun:hover {
color: #F51E0A;
}
.head_link--nukun::before,
.head_link--nukun::after {
content: '';
position: absolute;
width: 70%;
height: 2px;
background: #EEEEEE;
bottom: 0;
left: 15%;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.head_link--nukun::after {
background: #00B4FF;
-webkit-transform: translate3d(-300%,0,0) scale3d(0,1,1);
transform: translate3d(-300%,0,0) scale3d(0,1,1);
}
.head_link--nukun:hover::before {
-webkit-transform: translate3d(300%,0,0) scale3d(0,1,1);
transform: translate3d(300%,0,0) scale3d(0,1,1);
}
.head_link--nukun:hover::after {
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
transform: translate3d(0,0,0) scale3d(1,1,1);
}
.head_link--nukun span {
color: #00B4FF;
display: inline-block;
position: relative;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,0deg);
transform: perspective(1000px) rotate3d(0,1,0,0deg);
-webkit-transition: -webkit-transform 0.5s, color 0.5s;
transition: transform 0.5s, color 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.head_link--nukun:hover span {
color: #EEEEEE;
-webkit-transform: perspective(1000px) rotate3d(0,1,0,180deg);
transform: perspective(1000px) rotate3d(0,1,0,180deg);
}
链接在Firefox中看起来完美，即使鼠标悬停在链接上也是如此。我只在Safari中遇到了这个问题。非常感谢您的帮助！