使用CSS transform:scale放大锚点链接时父div尺寸变大布局异常

安全阿岳

2026-9-27

问题根源

你遇到的父容器尺寸变化和transform: scale属性无关，问题出在hover状态下新增了border属性：

你的a标签默认样式没有设置边框，hover时新增了1px的实体边框，会让元素的整体宽高各增加2px（左右/上下各1px），盒模型尺寸变化直接撑大了父级div，才导致了页面布局偏移。

修复方案

方案1：默认预留透明边框（推荐）

在a标签的默认样式中提前添加和hover状态同宽度的透明边框，hover时仅修改边框颜色即可，不会触发尺寸变化：

a#fonte1 {
    font-size: 1rem;
    font-weight: 300;
    transition: all 0.2s ease;
    display: inline-block;
    /* 新增以下两行，预留边框位置 */
    border: 1px solid transparent;
    border-radius: 0.3rem;
  }

a#fonte1:hover {
    transform: scale(1.2);
    cursor: pointer;
    color: rgb(13,89,253);
    /* 仅修改边框颜色即可，不用重复定义边框宽度和圆角 */
    border-color: rgb(13,89,253);
  }

方案2：用outline替代border

outline属性绘制的边框不会占用盒模型空间，不会影响元素尺寸：

a#fonte1:hover {
    transform: scale(1.2);
    cursor: pointer;
    color: rgb(13,89,253);
    /* 把border换成outline */
    outline: 1px solid rgb(13,89,253);
    border-radius: 0.3rem;
  }