html - 当另一个元素改变大小时如何避免html页面中的元素移动

Question

我有一张图片列表。下面是相关的html代码:

<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="t1.jpg"></a></li>
<li><a href="h2.jpg"><img alt="" src="t2.jpg"></a></li>
<li><a href="h3.jpg"><img alt="" src="t3.jpg"></a></li>
<li><a href="h4.jpg"><img alt="" src="t4.jpg"></a></li>
<li><a href="h5.jpg"><img alt="" src="t5.jpg"></a></li>
<li><a href="h6.jpg"><img alt="" src="t6.jpg"></a></li>
</ul>

当其中一个图像获得焦点或悬停时显示边框，以下是 css 页面中的代码:

li a:focus img {
    border: 2px solid blue;
}       

li a:hover img {
    border: 2px solid blue;
}

此代码有效，但问题是当其中一个图像获得焦点或悬停时，页面中的所有元素都会移动，这就像在图像列表上移动时整个页面都在跳跃一样。我尝试在 css 中遵循代码，但没有成功。

img {
position: absolute;
}

以及以下内容:

img {
position: relative;
left: 20px;
}

有人知道如何解决这个问题吗？谢谢!!

Answer 1

使用outline代替border:

li a:focus img {
  outline: 2px solid blue;
}       

li a:hover img {
  outline: 2px solid blue;
}

<ul id="image_list">
<li><a href="h1.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h2.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h3.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h4.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h5.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
<li><a href="h6.jpg"><img alt="" src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1"></a></li>
</ul>