Css 在Chrome中悬停时显示隐藏嵌套跨距时，列表项高度出现奇怪的跳跃

我有一个链接列表，这些链接使用嵌套的跨距元素作为鼠标悬停的滚动，并包含有关鼠标悬停的额外信息

见本页：

因此，在firefox中，该列表中的所有内容（请参阅页面“夏令营”部分中的夏令营列表，就在这两个描述的下方；有两个列表——左侧和右侧各一个）看起来都很好，包括当您将鼠标悬停在列表项（夏令营名称）上时。这样做会产生所需的隐藏嵌套跨距效果，显示每个营地的年龄信息

然而，在Chrome和Safari中，列表项在悬停时有一个奇怪的跳转故障，因此，隐藏的嵌套跨度实际上显示为块，而不是像它应该显示的那样浮动

---

这方面有什么建议吗？

这个问题可以通过将链接中的文本包装在

标记中（例如第一个标记中的“冒险家”）来解决。出于某种原因（不知道确切的原因），当浮动周围的其他元素具有宽度或也浮动或两者兼有时，浮动表现最佳。当文本没有立即被标记包围时，文本也变得不可预测，因此我尝试将所有文本保留在

span

s（或

h1

、

h2

或任何其他适合文本的标记）中

---

另一种解决方法是为

标记添加宽度，但您必须为每个链接指定不同的宽度，因此只需使用

span

标记即可

在Chrome上看起来不错…你有没有试着在旁边有黑色圆圈的黑色链接上悬停？当你在我的机器上停留在Chrome浏览器上时，下面的列表项目只下降了几个像素。太好了！成功了。我想一定有一个简单的解决方案我错过了。非常感谢。