悬停的边框使单词看起来像在摇晃

Question

我有一个显示导航链接的弹出窗口。每当用户悬停在链接上时，我都会在其周围显示一个白色边框。我的问题是，来自边框的1px会导致导航链接看起来有点摇晃。如何使导航链接保持固定而不移动？

要在片段中看到这一点，请单击第二个图像，弹出窗口就会出现。然后简单地将鼠标悬停在文本上。

$('.nav-popup').hide();
$("#nav-btn").on("click", function (event) {
	$('.nav-popup').fadeIn(350);
});
  //----- CLOSE
    $('[data-popup-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
 
        e.preventDefault();
    });

.nav-popup {
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.8);
	color: #FFF;
	position: fixed;
	z-index: 100;
	margin: 0;
	padding: 0;
	top:0;
	bottom:0;
}
.popup-close {
	position: absolute;
	top: 50px;
	right: 50px;
}
#x-close {
  transform: translate(50%, -50%);
  transition: transform .4s ease;
}
#x-close:hover {
    -webkit-transform: translate(50%, -50%) rotate(180deg);
    transform: translate(50%, -50%) rotate(180deg);
}
.nav-popup-inner {
	position: relative;
	height: 100%;
}
#nav-list {
	-webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	top: 50%;
    left: 50%;
	position: absolute;
	text-align: center;
}
.nav-item {
	display: block;
	margin: 50px 0;
	font-weight: bold;
	font-size: 2.5em;
}
.nav-item a {
	color: #FFF;
	text-decoration: none;
	transition: 0.2s ease;
}
.nav-item a:hover {
	color: #BFBFBF;
	border: 1px solid #FFF;
	padding: 15px;
	border-radius: 7px;
	transition: 0.2s ease;
}	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="nav-down">
	<div id="logo">
		<img src="/images/eslich.png" alt="">
	</div>
	<a href="#0" id="nav-btn"><img src="/icons/mobile_menu_white.png" style="height: 28px; width: 28px;" alt="Website Design Services Mobile Menu Button"></a>
	<div class="nav-popup" data-popup="popup-1">
		<div class="nav-popup-inner">
			<ul id="nav-list">
				<li class="nav-item"><a href="#">HOME</a></li>
				<li class="nav-item"><a href="#">SERVICES</a></li>
				<li class="nav-item"><a href="#">PROJECTS</a></li>
				<li class="nav-item"><a href="#">ABOUT</a></li>
				<li class="nav-item"><a href="#">SAFETY</a></li>
				<li class="nav-item"><a href="#">CONTACT</a></li>
			</ul>
				<a class="popup-close" data-popup-close="popup-1" href="#"><img src="/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close"></a>
		</div>
	</div>
</header>

Answer 1

我最终弄明白了这一点。我在正常状态下添加了一个透明边界。这就成功了。

Answer 2

我发现这是由于webkit translate选项。由于在-50%处进行平移，每次在其上进行hover时，元素都将丢失其height引用并重新定位，从而导致"抖动"效果。

既然你使用这个技巧来垂直对齐，我建议你使用以下两种方法之一：http://phrogz.net/css/vertical-align/index.html

工作Fiddle：https://jsfiddle.net/LvmLjexc/1/