点击链接页面抖动：添加:active伪类边框引发布局偏移问题求助

你遇到的抖动问题，本质是链接在:active状态下新增的边框改变了元素尺寸，触发了页面重排。哪怕设置了box-sizing: border-box，但默认状态下链接没有边框，:active时添加边框会让元素总占用空间增加，导致页面布局调整，出现抖动。

下面是三个可行的修复方案：

方案1：提前设置透明边框 #

给链接默认添加和:active状态下宽度一致的透明边框，这样:active时仅修改边框颜色，不会改变元素整体尺寸。

修改.main-nav a的CSS：

.main-nav a {
  display: inline-block;
  color: white;
  text-decoration: none;
  font-size: 15px;
  padding: 15px;
  border: 1px solid transparent; /* 新增默认透明边框 */
}

:active样式调整为仅修改颜色：

a:active {
  border-color: white;
}

方案2：使用outline代替border #

outline是绘制在元素外部的线条，不占用布局空间，不会改变元素尺寸，自然不会触发页面抖动。

修改:active的样式：

a:active {
  outline: solid white 1px; /* 用outline替换border */
}

方案3：用box-shadow模拟边框 #

box-shadow同样不占用布局空间，用它模拟边框效果也能避免尺寸变化。

修改:active的样式：

a:active {
  box-shadow: 0 0 0 1px white; /* 用box-shadow模拟1px边框 */
}

内容的提问来源于stack exchange，提问作者Utam