Html 为什么悬停时不透明度的改变会使第二行的flex子对象移动/改变？

大家看一下这个例子。（全屏观看）您可以看到元素在悬停时改变不透明度

但是，flex换行到第二行的flex项似乎会随着相同的悬停移动或更改高度。。。它看起来像一个反弹效果。除了不透明之外，没有什么不同。在我的转换中，我尝试只针对不透明度，尝试flex:023%；所以链接不应该改变大小，但仍然会得到相同的结果

基本上，由于我添加了不透明度悬停/过渡，第二行flex项目在悬停时反弹

发生了什么事

.nav下拉列表{
显示：块；
宽度：100%；
最大宽度：980px；
填充：30px；
背景色：#fbfb；
}
.nav下拉图像链接{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.图像链接{
弹性：0113%；
边缘底部：20px；
}
.image链接a{}
.图像链接a img{
显示：块；
宽度：100%；
边缘底部：8px；
不透明度：1；
过渡：0.3s；
}
.图像链接a img：悬停{
不透明度：0.9；
}

---

使用以下样式

.image-link * {
    -webkit-backface-visibility: hidden;
}

这就解释了为什么我们需要它

.nav下拉列表{
显示：块；
宽度：100%；
最大宽度：980px；
填充：30px；
背景色：#fbfb；
}
.nav下拉图像链接{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.图像链接{
弹性：0113%；
边缘底部：20px；
}
.image链接a{}
.图像链接a img{
显示：块；
宽度：100%；
边缘底部：8px；
不透明度：1；
过渡：0.3s；
}
.图像链接a img：悬停{
不透明度：0.9；
}
.图像链接*{
-webkit背面可见性：隐藏；
}

---

使用以下样式

.image-link * {
    -webkit-backface-visibility: hidden;
}

这就解释了为什么我们需要它

.nav下拉列表{
显示：块；
宽度：100%；
最大宽度：980px；
填充：30px；
背景色：#fbfb；
}
.nav下拉图像链接{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
}
.图像链接{
弹性：0113%；
边缘底部：20px；
}
.image链接a{}
.图像链接a img{
显示：块；
宽度：100%；
边缘底部：8px；
不透明度：1；
过渡：0.3s；
}
.图像链接a img：悬停{
不透明度：0.9；
}
.图像链接*{
-webkit背面可见性：隐藏；
}

在Firefox 60.0.1中运行良好您是对的，这似乎在Firefox中运行良好在Firefox 60.0.1中您是对的，这似乎在Firefox中运行哇，您是一位女神！我添加了

.image链接一个img{backface visibility:hidden；}

，这对我很有用！读了你链接的那篇文章后也很奇怪。哇，你真是个女神！我添加了

.image链接一个img{backface visibility:hidden；}

，这对我很有用！即使在读了你链接的文章之后也很奇怪。