变换比例稍微推动 Font Awesome 图标

Question

我在父 div 中有一个 Font Awesome 图标，display: flex它本身位于容器 div 内display: flex。当我尝试transform: scale(1.2)悬停时，它会稍微推动该元素：https://jsfiddle.net/Daniel_Knights/gptyo3be/5/.container {  display: flex;  justify-content: center;  align-items: center;  width: 100%;  height: 100%;}.parent {  display: flex;  justify-content: center;  align-items: center;  width: 100px;  height: 100px;}i {  cursor: pointer;  transition: transform 0.2s;}i:hover {  transform: scale(1.2);}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"><div class="container">  <div class="parent">    <i class="fa fa-eye" id="single-item-eye"></i>  </div></div>有什么想法可能是为什么吗？

Answer 1

使用 SVG 版本就不会出现此问题。缩放 SVG 比缩放文本更好：

.container {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 100%;

}

.parent {

  display: flex;

  justify-content: center;

  align-items: center;

  width: 100px;

  height: 100px;

}

svg {

  cursor: pointer;

  transition: transform 0.2s;

}

svg:hover {

  transform: scale(1.2);

}

<script  src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>

<div class="container">

  <div class="parent">

    <i class="fa fa-eye" id="single-item-eye"></i>

  </div>

</div>