按钮Hover时页面轻微下移问题排查求助

问题根源是：hover状态下给按钮添加了border，但默认状态下按钮没有边框——border会占据元素的布局空间，导致hover时按钮的总尺寸（宽度+左右边框、高度+上下边框）变大，挤压下方元素，引发页面下移。

下面是两种可行的解决办法：

方案1：默认状态添加透明边框 #

给初始状态的.button_aboutme设置与hover状态宽度一致的透明边框，这样hover时仅替换边框颜色，不会改变元素整体尺寸：

.button_aboutme {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 18px;
  background-color: #0071e3;
  text-align: center;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 200px;
  padding: 20px;
  margin-bottom: 130px;
  /* 添加与hover状态同宽度的透明边框 */
  border: 1px solid transparent;
}

.button_aboutme:hover {
  border-color: #0071e3;
  background-color: #fff;
  transition: 0.1s;
}

.button_aboutme a {
  color: #FFF;
}

.button_aboutme:hover a {
  color: #0071e3;
}

方案2：使用outline替代border #

outline不属于元素的布局空间，添加后不会改变元素尺寸，完美避免布局偏移问题：

.button_aboutme:hover {
  outline: solid #0071e3;
  background-color: #fff;
  transition: 0.1s;
}

.button_aboutme {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 18px;
  background-color: #0071e3;
  text-align: center;
  display: block;
  margin: auto;
  border-radius: 5px;
  width: 200px;
  padding: 20px;
  margin-bottom: 130px;
}

.button_aboutme a {
  color: #FFF;
}

.button_aboutme:hover a {
  color: #0071e3;
}

注意：outline默认不会适配border-radius的圆角效果，如果需要圆角边框，方案1是更合适的选择。

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