css - 悬停时字体图标抽搐

Question

我在创建的主题中的 Chrome 中出现了一个问题，当我将鼠标悬停在图像上时，页面上的字体图标会四处移动。我四处寻找解决方案，但找不到任何人提到这一点。在此处查看演示，并将鼠标悬停在第二篇博文中的图像上。

这是悬停事件的 css 规则：

.entry-image a:hover img {
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -ms-transform: scale(1.06);
  -o-transform: scale(1.06);
  transform: scale(1.06);
}

在此先感谢，伊瓦尔·拉夫恩

Answer 1

我猜你用 or 设置了边距或ems位置rems。当 em 或 rem 大小解析为带小数点的像素值（例如，17.100295px）时，悬停在 Webkit 和 Blink 中的附近元素上可能会导致轻微的抽搐。

Answer 2

我修好了它。

我只需要为 :before 伪元素添加一个 CSS 规则，使其具有 margin:0 和 display:inline ，这就解决了这个问题。