变换比例稍微推动 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 {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; width: 100%;&nbsp; height: 100%;}.parent {&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;&nbsp; width: 100px;&nbsp; height: 100px;}svg {&nbsp; cursor: pointer;&nbsp; transition: transform 0.2s;}svg:hover {&nbsp; transform: scale(1.2);}<script&nbsp; src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script><div class="container">&nbsp; <div class="parent">&nbsp; &nbsp; <i class="fa fa-eye" id="single-item-eye"></i>&nbsp; </div></div>