Question

我有一些看起来大致相似的代码，从图像和一些文本中创建超链接：

<div>
  <a class="stutter" href="#">
    <img src="https://i.imgur.com/zLg1Z2E.png" />
    <p>Label</p>
  </a>
</div>

当用户将鼠标悬停在链接上时，使用这样的CSS来实现漂亮的颜色更改：

a {
  color: #c60;
  transition: color 1s;
}
a:hover {
  color: #d70;
}

此外，图像和p标签都向左浮动。

问题是，过渡并不顺利，它会明显结果。我找到了两种方法来阻止口吃。首先，如果我删除图像上的float属性，则口吃停止并且过渡平滑。其次，如果我将CSS选择器从a更改为a p，从a:hover更改为a:hover p，则口吃也会停止。

我对其中任何一个都不满意，因为我想使用float进行布局，在选择器中指定p元素似乎很奇怪，因为我想要所有a标记内的文字可以更改颜色，无论它是否在p标记内。

（坦率地说，这就是为什么我试图避免编写以浏览器虚拟机为目标的程序，它始终存在奇怪的故障和缓慢，我无法轻易诊断或修复。）。

这种口吃是否有预期的行为？

在Firefox 56.0.2上测试。

编辑：安装铬并在那里测试，没有口吃。我可能会删除这个问题并提交Firefox错误。

提交了错误报告

与我在编辑中所说的相反，我会留下这个问题并让它作为对他人的警告。（除非我得到一堆downvotes：P）